<!--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;
}
微信小程序美食推荐
最新推荐文章于 2024-05-03 00:39:21 发布