微信小程序跳转详情页面

今天，我们要实现如下的效果，进入详情页，获取产品的具体数据。本文请求的数据是本地的，实际开发是要通过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: {photoImg: "",//匹配的数据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({photoImg: item.images})}})},

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

微信小程序跳转详情页面相关推荐

【微信小程序】微信小程序跳转H5页面的实现思路与方案
需求简述当前项目的主流程采用H5的方式编写. 在一些渠道的营销推广活动中,并不能直接跳转到网页,但可以跳转到微信小程序. 于是希望通过微信小程序,间接实现跳转H5页面的需求. 方法简述有两种解决方 ...
微信小程序-跳转url页面
在进行微信小程序开发的时候我们会经常遇到跳转url页面的操作,那么微信官方也为我们提供了相应的方法,现在将常用的两种方法举例出来,供大家参考: 方法一 wx.navigateTo跳转链接: < ...
微信小程序入门四详情页面
前三章基本完成文章列表页面的UI界面和数据加载,这章介绍内容详情页面的加载和布局.有了之前的知识储蓄,这章就容易多了.废话不多说. 首先是服务端代码,通过id查询数据:接口 https://www.i ...
微信小程序跳转tabBar页面传参
微信小程序底部tabBar一般通过wx.switchTab进行跳转,但该api无法传参,如何解决传参问题? 网上查了一下,一般都是通过app.globalData全局变量进行传参的,但这种方法在需要配 ...
微信小程序跳转第三方页面
使用web-view,官方说明web-view 承载网页的容器.会自动铺满整个小程序页面,个人类型的小程序暂不支持使用具体实现思路: 1.首先需要配置小程序的公众平台当中的开发管理选项的业务域名,具 ...
微信小程序跳转h5页面的方式
通过web-view跳转h5, 自己总结了几种用过的方法,有更好的,欢迎讨论补充: 1.使用navigator在wxml中编码,单独写一个文件,/pages/webview/index.wxml 第二 ...
微信小程序跳转php页面,微信小程序页面跳转方法总结
在我们日常重网有剑据些文页的底社按标近新站的不的方的开发过程中,跳转页面是每个项目中必有的需求,包括监听返回按钮,回到指定页面,在小程序中页面跳转即页面和第,.年过事工宗据指数遍互业经搞断果会击者.公 ...
微信小程序跳转tabbar页面
wx.switchTab({url: '../index/index',})
taro小程序跳转h5页面
taro微信小程序跳转h5页面项目架构-tarojs+react+sass+微信开发者工具项目使用taro官网上面的步骤构建起来的项目架构,之后生成微信端的小程序,由于项目与车险有关,需要多个渠道 ...

微信小程序跳转详情页面

微信小程序跳转详情页面相关推荐

最新文章

热门文章