微信小程序如何實(shí)現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能
引言
模仿京東小程序,實(shí)現(xiàn)下列功能
- 首頁包含了手機(jī)圖片,手機(jī)的描述,手機(jī)的價格,購物車圖標(biāo)
- 首頁顯示兩行文字,多余的文字隱藏,以3個點(diǎn)代替
- 點(diǎn)擊頁面不同的地方,能夠跳轉(zhuǎn)到不同的手機(jī)詳情頁面
- 手機(jī)詳情頁包含手機(jī)圖片,上架日期,價格,手機(jī)描述等圖文信息**
1.1實(shí)現(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 淺夢星河 智能手機(jī)', msg2:'Redmi K40 驍龍870 三星AMOLED 120Hz高刷直屏 4800萬高清三攝 12GB+256GB 晴雪 游戲電競5G手機(jī)', msg3:'【24期免息】小米10S 新品5G旗艦 小米手機(jī)12重禮 白色 8+256GB', msg4:'小米(MI) 11ultra 5G(白條0首付6期可選)全網(wǎng)通手機(jī) 陶 瓷白 白條分期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實(shí)現(xiàn)調(diào)跳轉(zhuǎn)到手機(jī)詳情頁
跳轉(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 淺夢星河 智能手機(jī)', msg2:'Redmi K40 驍龍870 三星AMOLED 120Hz高刷直屏 4800萬高清三攝 12GB+256GB 晴雪 游戲電競5G手機(jī)', msg3:'【24期免息】小米10S 新品5G旗艦 小米手機(jī)12重禮 白色 8+256GB', msg4:'小米(MI) 11ultra 5G(白條0首付6期可選)全網(wǎng)通手機(jī) 陶 瓷白 白條分期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; }
至此項(xiàng)目結(jié)束
—————————————————————————————————
最后這里要說明在微信小程序開發(fā)工具中,在page目錄下創(chuàng)建新的頁面時,需要在app.json中定義頁面的路徑
這里以這個小項(xiàng)目為例,下面符app.json代碼
{ "pages": [ "pages/index/index", "pages/page1/page1" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "京東手機(jī)", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json", "style": "v2" }
總結(jié)
到此這篇關(guān)于微信小程序如何實(shí)現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能的文章就介紹到這了,更多相關(guān)小程序列表跳轉(zhuǎn)商品詳情頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
提供復(fù)制本站內(nèi)容時出現(xiàn),該文章轉(zhuǎn)自腳本之家等字樣的js代碼
提供復(fù)制本站內(nèi)容時出現(xiàn),該文章轉(zhuǎn)自腳本之家等字樣的js代碼...2007-03-03JavaScript中止網(wǎng)絡(luò)請求的常見方法
在JavaScript中,中止網(wǎng)絡(luò)請求通常依賴于所使用的網(wǎng)絡(luò)請求庫或框架,本文給大家介紹了是一些常見的方法和庫,以及它們?nèi)绾沃С种兄咕W(wǎng)絡(luò)請求,并通過代碼講解的非常詳細(xì),需要的朋友可以參考下2024-10-10Node.js開發(fā)指南中的簡單實(shí)例(mysql版)
工作原因需要用到nodejs,于是找到了《node.js開發(fā)指南》這本書來看看,作者BYVoid 為清華大學(xué)計(jì)算機(jī)系的高材生,年紀(jì)竟比我還小一兩歲,中華地廣物博真是人才輩出,佩服2013-09-09在SSM框架下用laypage和ajax實(shí)現(xiàn)分頁和數(shù)據(jù)交互的方法
今天小編大家分享一篇在SSM框架下用laypage和ajax實(shí)現(xiàn)分頁和數(shù)據(jù)交互的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09關(guān)于var在for循環(huán)遇到的問題解決
這篇文章主要給大家介紹了關(guān)于var在for循環(huán)遇到的問題的幾種解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07關(guān)于json字符串與實(shí)體之間的嚴(yán)格驗(yàn)證代碼
在一個項(xiàng)目中要求嚴(yán)格驗(yàn)證傳入的json字符串與定義的 類匹配,否則不記錄。后來查了好多資料才弄明白,下面小編給大家分享下關(guān)于json字符串與實(shí)體之間的嚴(yán)格驗(yàn)證,感興趣的朋友一起看看吧2016-11-11