微信小程序美食推荐_微信小程序美食列表代码

<!--index.wxml-->
<wxs  module="test">
  function deal(str){
    return str.substring(0,3)+'-'+str.substring(3,7)+'-'+str.substring(7,11)
  }
  module.exports={
    deal:deal
  }
</wxs>
<view class="warp"  wx:for="{{list}}" wx:key="*this">
<image class="image" src="{{item.image}}" mode=""/>
<view class="right">
<view class="title">{{item.title}}</view>
<view>电话：{{test.deal(item.phone)}}</view>
<view>地址：{{item.address}}</view>
<view>营业时间：{{item.hours}}</view>
</view>
</view>
 
// index.js
Page({
  warp(){
    wx.stopPullDownRefresh()
  },
  onReachBottom(){
    console.log('触发了上拉事件');
  },
  onPullDownRefresh(){
    console.log('触发了下拉事件');
  },
data:{
list:[
  {
    image:"/image/回锅肉.jpg",
    title:'美味回锅肉',
    phone:'15321212323',
    address:'铜仁国际大酒店',
    hours:'周末早上9:00~晚上19:00',
  },
  {
    image:"/image/砂锅饭.jpg",
    title:'大碗砂锅饭',
    phone:'13895955959',
    address:'碧江区小十子',
    hours:'周末早上9:00~晚上19:00',
  },
  {
    image:"/image/洋葱炒蛋.jpg",
    title:'爆炒洋葱炒蛋',
    phone:'15454554544',
    address:'铜仁大十字',
    hours:'周末早上9:00~晚上19:00',
  },
  {
    image:"/image/土豆炒牛肉.jpg",
    title:'新鲜土豆炒牛肉',
    phone:'13878788787',
    address:'铜仁高铁站左转100米',
    hours:'周末早上9:00~晚上19:00',
  },
],
}
})
 
{
  "usingComponents": { },
 "navigationBarTitleText": "贵州美食",
 "enablePullDownRefresh": true,
 "onReachBottomDistance": 100
}
 
 
.warp{
  display: flex;
  font-size: 27rpx;
  margin: 20rpx 5rpx;
  box-shadow: 0 0 10px;
  border-radius: 5px;
  padding: 15rpx;
}
.right{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-left: 6rpx;
}
.image{
  height: 35vw;
  width: 35vw;
  flex-shrink: 0; 
}
.title{
  font-weight: bold;
  font-size: 35rpx;
}