18小程序中导航携带参数跳转到对应页面（案例【上】）

第一步：导航跳转

<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

其他样式：