第一步:导航跳转
<view class="grid-list">
<navigator class="grid-item" wx:for="{{gridList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</navigator>
</view>
第二步:动态设置列表页的标题
注:onload里的数据只能在onload中使用,要想在其他地方使用,需要先转存到data中
第三步:列表页的API接口获取列表页数据
在data中定义数据:
定义函数获取数据:
getShopList(){
wx.request({
url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
method:'GET',
data:{
_page:this.data.page,
_limit:this.data.pageSize
},
success:(res)=>{
// console.log(res);
this.setData({
shopList:[...this.data.shopList,...res.data],
total:res.header['X-Total-Count']-0
})
}
})
},
在onload中调用函数:
第四步:渲染列表页
渲染出的数据,会发现图片与图片之间有白边,可以设置样式display:block
其他样式: