微信小程序如何实现商品列表跳转商品详情页功能微信小程序如何实现商品列表

引言
1.1实现首页页面
2.1实现调跳转到手机详情页
总结

引言模仿京东小程序，实现下列功能

首页包含了手机图片，手机的描述，手机的价格，购物车图标
首页显示两行文字，多余的文字隐藏，以3个点代替
点击页面不同的地方，能够跳转到不同的手机详情页面
手机详情页包含手机图片，上架日期，价格，手机描述等图文信息**

1.1实现首页页面效果如下图

文章图片

代码如下：其中js页面代码包含了跳转

{{msg1}}￥ 1799{{msg2}}￥ 2199{{msg3}}￥ 2499{{msg4}}￥ 3199

// index.js// const app = getApp()Page({data: {msg1:'Redmi Note 11 5G 天玑810 33W Pro快充 5000mAh大电池 6GB +128GB 浅梦星河智能手机',msg2:'Redmi K40 骁龙870 三星AMOLED 120Hz高刷直屏 4800万高清三摄 12GB+256GB 晴雪游戏电竞5G手机',msg3:'【24期免息】小米10S 新品5G旗舰小米手机12重礼白色 8+256GB',msg4:'小米（MI） 11ultra 5G（白条0首付6期可选）全网通手机陶瓷白白条分期12+256GB ',value:0},jump1:function(event){this.setData({value:1}),wx.navigateTo({url: '/pages/page1/page1?value='https://www.it610.com/article/+this.data.value,success(){console.log('页面one跳转成功')}})},jump2:function(event){this.setData({value:2}),wx.navigateTo({url: '/pages/page1/page1?value='https://www.it610.com/article/+this.data.value,success(){console.log('页面two跳转成功')}})},jump3:function(event){this.setData({value:3}),wx.navigateTo({url: '/pages/page1/page1?value='https://www.it610.com/article/+this.data.value,success(){console.log('页面three跳转成功')}})},jump4:function(event){this.setData({value:4}),wx.navigateTo({url: '/pages/page1/page1?value='https://www.it610.com/article/+this.data.value,success(){console.log('页面four跳转成功')}})}});

/**index.wxss**/.container{margin-left: 10px; margin-right: 10px; margin-top: 10px; display: flex; flex-direction: row; }#wz{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.left{width: 50%; }.right{width: 50%; }.tp{width: 190px; height: 200px; }.jg-l{width: 75%; color: blue; }.jg-r{width: 25%; }.jg-r image{width: 20px; height: 20px; }

2.1实现调跳转到手机详情页跳转成功提示如下：

文章图片

详情页面如下：

文章图片

代码如下：

产品编号：6007上架日期：2021年9月产品价格：￥1799产品描述：{{msg1}}产品编号：6008上架日期：2022年1月产品价格：￥2199产品描述：{{msg2}}产品编号：6009上架日期：2021年11月产品价格：￥2499产品描述：{{msg3}}产品编号：6007上架日期：2022年1月产品价格：￥3199产品描述：{{msg4}}

// pages/page1/page1.jsPage({data: {msg1:'Redmi Note 11 5G 天玑810 33W Pro快充 5000mAh大电池 6GB +128GB 浅梦星河智能手机',msg2:'Redmi K40 骁龙870 三星AMOLED 120Hz高刷直屏 4800万高清三摄 12GB+256GB 晴雪游戏电竞5G手机',msg3:'【24期免息】小米10S 新品5G旗舰小米手机12重礼白色 8+256GB',msg4:'小米（MI） 11ultra 5G（白条0首付6期可选）全网通手机陶瓷白白条分期12+256GB ',},onLoad: function (options) {this.setData({value:options.value})},});

/* pages/page1/page1.wxss */.container{margin-left: 10px; margin-right: 10px; margin-top: 10px; display: flex; flex-direction: row; }

至此项目结束
—————————————————————————————————
最后这里要说明在微信小程序开发工具中，在page目录下创建新的页面时，需要在app.json中定义页面的路径
这里以这个小项目为例，下面符app.json代码

{"pages": ["pages/index/index","pages/page1/page1"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F6F6F6","navigationBarTitleText": "京东手机","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json","style": "v2"}

总结 【微信小程序如何实现商品列表跳转商品详情页功能】到此这篇关于微信小程序如何实现商品列表跳转商品详情页功能的文章就介绍到这了,更多相关小程序列表跳转商品详情页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！