微信小程序实现跳转详情页面

2024-04-02 19:04:59 168人浏览薄情痞子

摘要

本文实例为大家分享了微信小程序实现跳转详情页面的具体代码，供大家参考，具体内容如下我们要实现如下的效果，进入详情页，获取产品的具体数据。本文请求的数据是本地的，实际开发是要通过aj

本文实例为大家分享了微信小程序实现跳转详情页面的具体代码，供大家参考，具体内容如下

我们要实现如下的效果，进入详情页，获取产品的具体数据。本文请求的数据是本地的，实际开发是要通过ajax请求服务器中的产品数据，为了避免业务代码扰乱视听，只截取了关键代码

1.首先我们需要两个页面，一个首页（就是产品列表页），一个详情页（产品的具体数据页）

首页wxml代码：

这里举例的是传id到详情页，这样详情页才知道我们需要加载的是哪个产品，也可以传index下标，不过感觉id更靠谱些。(id是你产品列表里面的数据，渲染列表时拿到的)

 <!-- bindtap绑定的是首页跳转函数， data-XX="这里绑定的是要传到详情页的数据" （这里的传的id） -->
 <view  bindtap="skipTravelDetails" data-id="{{id}}">
     <view>
         <image  src="{{article.imgArray[0]}}"/>
     </view>
</view>

2.首页js代码：

skipTravelDetails:function(e){
        let id=e.currentTarget.dataset.id //获取点击产品时拿到的id，就是data-id传过来的值
        // wx.navigateTo跳转页面的方法
        //URL是传递的是详情页的路径，把id拼接传过去就可以啦
        wx.navigateTo({
            url: "./sonPage/details?id="+id,
        })
    }

3.详情页wxml代码：

这里面就是你想要生成的页面内容，数据的显示，结构按需求自己写~

<!-- photoImg就是需要渲染的数据 -->
<view>
    <image src="{{photoImg}}" />
</view>

4.详情页js代码：

data: {
    PHPtoImage: "",//匹配的数据
    imgList: [{
        id: 1,
        images: ["/images/a.jpg", "/images/chengDu.jpg", "/images/ac.jpg"]
      }, {
        id: 2,
        images: ["/images/chengDu.jpg", "/images/a.jpg"]
      }, {
        id: 3,
        images: ["/images/chongQing.jpg", "/images/chengDu.jpg"]
      } ]  // 本地数据
  },

  onLoad: function (options) {
    // options.id 就是首页传过来的id，接下来循环找到id所匹配的数据就可以进行渲染啦！
    this.data.imgList.forEach(item => {
      if (options.id == item.id) {
        this.setData({
          phptoImage: item.images
        })
      }
    })
  },

总结：整个操作就一个点击bindtap点击事件，和详情页onload生命周期函数就可以实现啦，它在页面加载的时候进行触发，并可以通过（options）参数获取到跳转链接上面的辨识符(id),再通过（this.setData）把值（photoImage）更新显示就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 微信小程序实现跳转详情页面

本文链接: https://www.lsjlt.com/news/152500.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341