微信小程序实现跳转详情页面
本文实例为大家分享了微信小程序实现跳转详情页面的具体代码,供大家参考,具体内容如下
我们要实现如下的效果,进入详情页,获取产品的具体数据。本文请求的数据是本地的,实际开发是要通过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)更新显示就完成了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)