微信小程序如何實現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能

第微信小程序如何實現(xiàn)商品列表跳轉(zhuǎn)商品詳情頁功能目錄引言1.1實現(xiàn)首頁頁面2.1實現(xiàn)調(diào)跳轉(zhuǎn)到手機詳情頁總結(jié)

引言

模仿京東小程序，實現(xiàn)下列功能

首頁包含了手機圖片，手機的描述，手機的價格，購物車圖標(biāo)首頁顯示兩行文字，多余的文字隱藏，以3個點代替點擊頁面不同的地方，能夠跳轉(zhuǎn)到不同的手機詳情頁面手機詳情頁包含手機圖片，上架日期，價格，手機描述等圖文信息**

1.1實現(xiàn)首頁頁面

效果如下圖

代碼如下：其中js頁面代碼包含了跳轉(zhuǎn)

!--index.wxml--

view

viewbindtap="jump1"

view

imagesrc="/image/a.jpg"mode="widthFix"/image

/view

viewid="wz"{{msg1}}/view

view

view￥1799/view

view

imagesrc="/image/gwc.png"/image

/view

/view

/view

viewbindtap="jump2"

view

imagesrc="/image/b.jpg"mode="widthFix"/image

/view

viewid="wz"{{msg2}}/view

view

view￥2199/view

view

imagesrc="/image/gwc.png"/image

/view

/view

/view

/view

view

viewbindtap="jump3"

view

imagesrc="/image/c.jpg"mode="widthFix"/image

/view

viewid="wz"{{msg3}}/view

view

view￥2499/view

view

imagesrc="/image/gwc.png"/image

/view

/view

/view

viewbindtap="jump4"

view

imagesrc="/image/d.jpg"mode="widthFix"/image

/view

viewid="wz"{{msg4}}/view

view

view￥3199/view

view

imagesrc="/image/gwc.png"/image

/view

/view

/view

/view

//index.js

//constapp=getApp()

Page({

data:{

msg1:'RedmiNote115G天璣81033WPro快充5000mAh大電池6GB+128GB淺夢星河智能手機',

msg2:'RedmiK40驍龍870三星AMOLED120Hz高刷直屏4800萬高清三攝12GB+256GB晴雪游戲電競5G手機',

msg3:'小米10S新品5G旗艦小米手機12重禮白色8+256GB',

msg4:'小米（MI）11ultra5G（白條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;

至此項目結(jié)束

最后這里要說明在微信小程序開發(fā)工具中，在page目錄下創(chuàng)建新的頁面時，需要在app.json中定義頁面的路徑

這里以這個小項目為例，下面符app.json代碼

{

"pages":[

"pages/index/index",

"pages/page1/page1"

"window":{

"backgroundColor":"#F6F6F6",

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":"#F6F6F6",

"navigationBarTitleText":