微信小程序如何實現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能
引言
模仿京東小程序,實現(xiàn)下列功能
- 首頁包含了手機圖片,手機的描述,手機的價格,購物車圖標
- 首頁顯示兩行文字,多余的文字隱藏,以3個點代替
- 點擊頁面不同的地方,能夠跳轉(zhuǎn)到不同的手機詳情頁面
- 手機詳情頁包含手機圖片,上架日期,價格,手機描述等圖文信息**
1.1實現(xiàn)首頁頁面
效果如下圖
代碼如下:其中js頁面代碼包含了跳轉(zhuǎn)
<!--index.wxml--> <view class="container"> <view class="left" bindtap="jump1"> <view class="tp"> <image src="/image/a.jpg" mode="widthFix" style="background-color: white; width: 100%;"></image> </view> <view id="wz">{{msg1}}</view> <view class="container"> <view class="jg-l">¥ 1799</view> <view class="jg-r"> <image src="/image/gwc.png"></image> </view> </view> </view> <view class="right" bindtap="jump2"> <view class="tp"> <image src="/image/b.jpg" mode="widthFix" style="background-color: white; width: 100%;"></image> </view> <view id="wz">{{msg2}}</view> <view class="container"> <view class="jg-l">¥ 2199</view> <view class="jg-r"> <image src="/image/gwc.png"></image> </view> </view> </view> </view> <view class="container"> <view class="left" bindtap="jump3"> <view class="tp"> <image src="/image/c.jpg" mode="widthFix" style="background-color: white; width: 100%;"></image> </view> <view id="wz">{{msg3}}</view> <view class="container"> <view class="jg-l">¥ 2499</view> <view class="jg-r"> <image src="/image/gwc.png"></image> </view> </view> </view> <view class="right" bindtap="jump4"> <view class="tp"> <image src="/image/d.jpg" mode="widthFix" style="background-color: white; width: 100%;"></image> </view> <view id="wz">{{msg4}}</view> <view class="container"> <view class="jg-l">¥ 3199</view> <view class="jg-r"> <image src="/image/gwc.png"></image> </view> </view> </view> </view>
// 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期可選)全網(wǎng)通手機 陶 瓷白 白條分期12+256GB ', value:0 }, jump1:function(event){ this.setData({value:1}), wx.navigateTo({ url: '/pages/page1/page1?value='+this.data.value, success(){ console.log('頁面one跳轉(zhuǎn)成功') } }) }, jump2:function(event){ this.setData({value:2}), wx.navigateTo({ url: '/pages/page1/page1?value='+this.data.value, success(){ console.log('頁面two跳轉(zhuǎn)成功') } }) }, jump3:function(event){ this.setData({value:3}), wx.navigateTo({ url: '/pages/page1/page1?value='+this.data.value, success(){ console.log('頁面three跳轉(zhuǎn)成功') } }) }, jump4:function(event){ this.setData({value:4}), wx.navigateTo({ url: '/pages/page1/page1?value='+this.data.value, success(){ console.log('頁面four跳轉(zhuǎn)成功') } }) } });
/**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實現(xiàn)調(diào)跳轉(zhuǎn)到手機詳情頁
跳轉(zhuǎn)成功提示如下:
詳情頁面如下:
代碼如下:
<!--pages/page1/page1.wxml--> <view class="container"> <block wx:if="{{value==1}}"> <view class="center"> <view class="tp"> <image src="/image/a.jpg" mode="widthFix" style="background-color: white; width: 100%;"></image> </view> <view>產(chǎn)品編號:6007</view> <view>上架日期:2021年9月</view> <view>產(chǎn)品價格:¥1799</view> <view id="wz">產(chǎn)品描述:{{msg1}}</view> </view> </block> </view> <view class="container"> <block wx:if="{{value==2}}"> <view class="center"> <view class="tp"> <image src="/image/b.jpg" mode="widthFix" style="background-color: white; width: 100%;"></image> </view> <view>產(chǎn)品編號:6008</view> <view>上架日期:2022年1月</view> <view>產(chǎn)品價格:¥2199</view> <view id="wz">產(chǎn)品描述:{{msg2}}</view> </view> </block> </view> <view class="container"> <block wx:if="{{value==3}}"> <view class="center"> <view class="tp"> <image src="/image/c.jpg" mode="widthFix" style="background-color: white; width: 100%;"></image> </view> <view>產(chǎn)品編號:6009</view> <view>上架日期:2021年11月</view> <view>產(chǎn)品價格:¥2499</view> <view id="wz">產(chǎn)品描述:{{msg3}}</view> </view> </block> </view> <view class="container"> <block wx:if="{{value==4}}"> <view class="center"> <view class="tp"> <image src="/image/d.jpg" mode="widthFix" style="background-color: white; width: 100%;"></image> </view> <view>產(chǎn)品編號:6007</view> <view>上架日期:2022年1月</view> <view>產(chǎn)品價格:¥3199</view> <view id="wz">產(chǎn)品描述:{{msg4}}</view> </view> </block> </view>
// pages/page1/page1.js 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期可選)全網(wǎng)通手機 陶 瓷白 白條分期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; }
至此項目結束
—————————————————————————————————
最后這里要說明在微信小程序開發(fā)工具中,在page目錄下創(chuàng)建新的頁面時,需要在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" }
總結
到此這篇關于微信小程序如何實現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能的文章就介紹到這了,更多相關小程序列表跳轉(zhuǎn)商品詳情頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
提供復制本站內(nèi)容時出現(xiàn),該文章轉(zhuǎn)自腳本之家等字樣的js代碼
提供復制本站內(nèi)容時出現(xiàn),該文章轉(zhuǎn)自腳本之家等字樣的js代碼...2007-03-03在SSM框架下用laypage和ajax實現(xiàn)分頁和數(shù)據(jù)交互的方法
今天小編大家分享一篇在SSM框架下用laypage和ajax實現(xiàn)分頁和數(shù)據(jù)交互的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09