微信小程序联调接口
在wxml页面中使用wx:for进行列表项循环。
通过data-index={{item.id}}"绑定不同活动项的id,方便点击进行跳转
<block wx:for="{{form.data}}" wx:key="{{item.id}}">
<view bindtap = "toDetail" data-index="{{item.id}}" class="activity">
<view class="background">
<view class="text">
{{item.name}}
</view>
</view>
<view class="details">
<view class="text2">
<text class="in">{{item.number}}人已参加</text>
<text class="free">
<text wx:if="{{item.money == 0}}">
免费报名
</text>
</text>
</view>
<view class="text2">{{item.activityAddress}}</view>
<view class="text2">报名截止时间:{{item.enterEndDate}}</view>
</view>
</view>
</block>
在onload函数中调用接口
onLoad: function (options) {
app.apiPost({
url:'接口/findAppletActivityInfo.do'
}).then((res)=>{
this.setData({
form: res
})
})
},
之后在跳转函数中使用接口(接口请求类型为query)
通过e.currentTarget.dataset.index拿到活动的id
toDetail(e){
let index = e.currentTarget.dataset.index;
wx.navigateTo({
url: '接口/detail1/detail1?index='+index
})
}
再在detail页面通过options.index拿到对应的活动id,调用接口拿到活动详细数据并渲染到页面
onLoad: function (options) {
const id = options.index;
app.apiGet({
url: '接口/findAppletActivityInfoDetails.do?id='+id,
// data: {
// id
// }
}).then((res)=>{
this.setData({
form: res.data,
params: id
})
})
},
版权声明:本文为weixin_46233266原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。