第一步:导航跳转
![](https://i-blog.csdnimg.cn/blog_migrate/62d6557aa786d0ad13ac29b4c1dbae21.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5eeb2c8a377074c36632375d9084ba9a.png)
<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>
![](https://i-blog.csdnimg.cn/blog_migrate/166cc55858de78a4936437ccdd212d3c.png)
第二步:动态设置列表页的标题
注:onload里的数据只能在onload中使用,要想在其他地方使用,需要先转存到data中
![](https://i-blog.csdnimg.cn/blog_migrate/0f4378dfb2c9fc10e8de2b495e563993.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0135ec74b161f371c85826f5e2d199f8.png)
第三步:列表页的API接口获取列表页数据
![](https://i-blog.csdnimg.cn/blog_migrate/112cce295d3c590276a8a49d940025d0.png)
在data中定义数据:
![](https://i-blog.csdnimg.cn/blog_migrate/04be05591c487d2540a24005f17745f2.png)
定义函数获取数据:
![](https://i-blog.csdnimg.cn/blog_migrate/dccdb9066389d73b9caf5a74d9bfeec1.png)
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中调用函数:
![](https://i-blog.csdnimg.cn/blog_migrate/8b63b9cd734c74e066bb3bd817946f1e.png)
第四步:渲染列表页
![](https://i-blog.csdnimg.cn/blog_migrate/18aa3f44372edf5985ea0e7f9de9e107.png)
渲染出的数据,会发现图片与图片之间有白边,可以设置样式display:block
![](https://i-blog.csdnimg.cn/blog_migrate/4b40a71c4e456cefc11a475cbd70e2d8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8be296528f027d95190aa9e058d6bcb7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d19529ffa0312a2dd4efe4c6207c17a1.png)
其他样式:
![](https://i-blog.csdnimg.cn/blog_migrate/d0292e97718846fba49e83cfffcad87a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/48965bb8187caac2f26ab50dd646480f.png)