欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年04月21日 15:51:46   作者：王仟仟仟  
最近在學微信小程序開發(fā)的時候,碰上了一個問題,所以想著總結下,這篇文章主要給大家介紹了關于微信小程序如何實現(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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論