8带着id跳转页面以及navigateToredirectTonavigateBackswitchTab的区别

小半 • 2022年5月11日下午5:36 • 前端开发 • 阅读 167

跳转到详情页面

1.绑事件
bindtap="handleChangePage"

2.传id
data-myid="{{ item.id }}"

3.获取id
e.currentTarget.dataset.myid

4.跳转页面
wx.navigateTo({
  // 没有底部选项卡是正常的
  url: '/pages/detail/detail',
})

非选项卡跳转的方法：
(1)navigateTo  导航道，不关闭当前页面，跳转到新页面，显示返回按钮
(2)redirectTo  关闭当前页面，跳转到新的页面，显示首页按钮
(3)navigateBack 回到上一个页面

选项卡切换的方法：
(4)switchTab   专门负责跳转底部选项卡，选项卡切换

5.列表页面带着id跳转到详情页面
// 跳转到详情页面
handleChangePage (e) {
    // 带着id跳转页面
    wx.navigateTo({
      // 没有底部选项卡是正常的
      url: `/pages/detail/detail?id=${e.currentTarget.dataset.myid}`
    })
}

6.详情页面把onLoad中的options存到全局中，在onReady中拿到id进行Ajax请求
注意：小程序Ajax不支持Promise写法
data: {
    goodsInfo: {}
},

myid: 0, // 把id存到全局，让onReady拿到id后进行Ajax
// id是小程序默认或预留的属性，不能命名为id
    
onLoad: function (options) {
    this.myid = Number(options.id) // 字符串转换为Number
},
    
onReady: function () {
    wx.request({
      url: `http://localhost:3000/goods/${this.myid}`,
      success: (res) => {
        this.setData({
          goodsInfo: res.data
        })
      }
    })
},

轮播渲染和其他信息渲染

7.详情页轮播
wxml
<!-- 轮播 -->
<swiper>
  <swiper-item wx:for="{{ goodsInfo.slides }}" wx:key="index">
    <image src="{{ 'http://localhost:3000' + item }}" mode="widthFix" />
  </swiper-item>
</swiper>

wxss
/* 轮播 */
swiper {
  height: 750rpx;
}
swiper-item image {
  width: 100%;
}

8.商品其他信息渲染
<!-- 商品名称 -->
<view>
  {{ goodsInfo.name }}
</view>

<!-- 商品价格 -->
<view style="color: red">
  {{ goodsInfo.price }}
</view>

<!-- 商品特点 -->
<view>
  {{ goodsInfo.feature }}
</view>