微信小程序?qū)崙?zhàn)篇...

cyfanz 2021-10-30

展開全文

 哈嘍,，大家好,，今天要進(jìn)入新篇章啦，商品詳情頁,，這個(gè)可是個(gè)大模塊,，要分好幾次才能講解清楚，現(xiàn)在我們先進(jìn)行第一講,，老規(guī)矩,，先上效果圖
 
 

有木有很酷炫啊，下面由代碼君教你如何實(shí)現(xiàn)。

詳情頁布局

看效果圖,，可以知道詳情頁包含以下幾個(gè)模塊,，banner、標(biāo)題欄,、選擇購(gòu)買欄,、商品評(píng)價(jià)、商品詳情,、還有一個(gè)底部懸浮欄,，這里比較難的是底部懸浮欄，剩下的我們之前模塊我們之前就有布局過

1. detail.wxml

<!-- banner -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" data-src="{{item}}" bindtap="previewImage"></image>
    </swiper-item>
  </block>
</swiper>
<scroll-view scroll-y="true">
  <view class="detail">
    <text class="title">LANCOME蘭蔻小黑瓶精華肌底液</text>
    <text class="price">￥500</text>
  </view>
  <view class="separate"></view>
  <!-- sku選擇 -->
  <text bindtap="toggleDialog">請(qǐng)選擇購(gòu)買數(shù)量</text>
  <view class="separate"></view>
  <text>商品評(píng)價(jià)</text>
  <text class="text-remark">東西還可以,，好評(píng)~</text>
  <view class="separate"></view>
  <text>商品詳情</text>
  <block wx:for-items="{{detailImg}}" wx:key="name">
    <image class="image_detail" src="{{item}}" />
  </block>
  <view class="temp"></view>
</scroll-view>
<!-- 底部懸浮欄 -->
<view class="detail-nav">
  <image bindtap="toCar" src="../../images/detail/detail_btn_cart.png" />
  <view class="line_nav"></view>
  <image bindtap="addLike" src="{{isLike?'../../images/detail/detail_btn_mark_selected.png':'../../images/detail/detail_btn_mark_normal.png'}}" />
  <button class="button-green" bindtap="addCar" formType="submit">加入購(gòu)物車</button>
  <button class="button-red" bindtap="immeBuy" formType="submit">立即購(gòu)買</button>
</view>

這里面要講解的有

banner里面新加入一個(gè)東西bindtap=”previewImage”,，圖片預(yù)覽功能，就是查看大圖,，至于事件是如何處理的,，請(qǐng)查看detail.js 里的previewImage事件
底部懸浮欄里面的那個(gè)收藏按鈕，我們要如何做用戶點(diǎn)擊一下就更換收藏圖標(biāo)吶,，本文是通過isLike這個(gè)Boolean值來做判斷的,，用戶每觸發(fā)一次addLike事件，就更換一次Boolean值,，按鈕的更換效果就實(shí)現(xiàn)了

2. detail.wxss

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 直接設(shè)置swiper屬性 */
swiper {
  height: 500rpx;
}
swiper-item image {
  width: 100%;
  height: 100%;
}
.detail {
  display: flex;
  flex-direction: column;
  margin-top: 15rpx;
  margin-bottom: 0rpx;
}
.detail .title {
  font-size: 40rpx;
  margin: 10rpx;
  color: black;
  text-align: justify;
}
.detail .price {
  color: red;
  font-size: 40rpx;
  margin: 10rpx;
}
.line_flag {
  width: 80rpx;
  height: 1rpx;
  display: inline-block;
  margin: 20rpx auto;
  background-color: gainsboro;
  text-align: center;
}
.line {
  width: 100%;
  height: 2rpx;
  display: inline-block;
  margin: 20rpx 0rpx;
  background-color: gainsboro;
  text-align: center;
}
.detail-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  float: left;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100rpx;
}
.button-green {
  background-color: #4caf50; /* Green */
}
.button-red {
  background-color: #f44336; /* 紅色 */
}
.image_detail {
  width: 100%;
}
button {
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30rpx;
  border-radius: 0rpx;
  width: 50%;
  height: 100%;
  line-height: 100rpx;
}
.detail-nav image {
  width: 70rpx;
  height: 50rpx;
  margin: 20rpx 40rpx;
}
.line_nav {
  width: 5rpx;
  height: 100%;
  background-color: gainsboro;
}
/* 占位 */
.temp {
  height: 100rpx;
}
text {
  display: block;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  margin: 10rpx;
}
.text-remark {
  display: block;
  font-size: 25rpx;
  margin: 10rpx;
}

css 樣式屬性

border-radius 設(shè)置邊界圓角,，設(shè)置的大小就是邊角的弧度，該屬性可以應(yīng)該在按鈕活圖片上,，由于加入購(gòu)物車和立即購(gòu)買是放在底部所以最好是直角,，所以把border-radius設(shè)置為0
display inline-block值代表混合塊和內(nèi)聯(lián)特性。
盒子的外部被視為內(nèi)聯(lián)元素,。因此，不會(huì)為元素創(chuàng)建新行,。
框的內(nèi)部被視為塊元素,，并應(yīng)用諸如寬度，高度和邊距的屬性,。
align-items 設(shè)置了flex容器的對(duì)齊方式,。一般設(shè)置為center居中
z-index 屬性指定一個(gè)元素的堆疊順序。如果值設(shè)置為正數(shù),，越大這對(duì)應(yīng)的view也會(huì)越在上面一層,，負(fù)數(shù)就是在底層，當(dāng)前頁面z-index 為0,，所以要底部導(dǎo)航欄要浮在上面就把z-index 設(shè)置大于0就好

3. detail.js

Page({
  data: {
    isLike: true,
    // banner
    imgUrls: [
      "http://mz.djmall./files/product/20161201/148057921620_middle.jpg",
      "http://mz.djmall./files/product/20161201/148057922659_middle.jpg",
      "http://mz.djmall./files/product/20161201/148057923813_middle.jpg",
      "http://mz.djmall./files/product/20161201/148057924965_middle.jpg",
      "http://mz.djmall./files/product/20161201/148057925958_middle.jpg"
    ],
    indicatorDots: true, //是否顯示面板指示點(diǎn)
    autoplay: true, //是否自動(dòng)切換
    interval: 3000, //自動(dòng)切換時(shí)間間隔,3s
    duration: 1000, //  滑動(dòng)動(dòng)畫時(shí)長(zhǎng)1s
    // 商品詳情介紹
    detailImg: [
      "http://7xnmrr.com1.z0.glb./detail_1.jpg",
      "http://7xnmrr.com1.z0.glb./detail_2.jpg",
      "http://7xnmrr.com1.z0.glb./detail_3.jpg",
      "http://7xnmrr.com1.z0.glb./detail_4.jpg",
      "http://7xnmrr.com1.z0.glb./detail_5.jpg",
      "http://7xnmrr.com1.z0.glb./detail_6.jpg",
    ],
  },
  //預(yù)覽圖片
  previewImage: function (e) {
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current, // 當(dāng)前顯示圖片的http鏈接  
      urls: this.data.imgUrls // 需要預(yù)覽的圖片http鏈接列表  
    })
  },
  // 收藏
  addLike() {
    this.setData({
      isLike: !this.data.isLike
    });
  },
  // 跳到購(gòu)物車
  toCar() {
    wx.switchTab({
      url: '/pages/cart/cart'
    })
  },
  // 立即購(gòu)買
  immeBuy() {
    wx.showToast({
      title: '購(gòu)買成功',
      icon: 'success',
      duration: 2000
    });
  },
})

介紹幾個(gè)系統(tǒng)API的接口

wx.previewImage 圖片預(yù)覽功能
- current 傳入當(dāng)前圖片路徑
- urls 圖片數(shù)組urls
wx.showToast
Toast 吐司,，做前端都知道，這個(gè)是一定會(huì)用到的，就是彈出半透明框,，和用戶進(jìn)行交互,，wx.showToast調(diào)用很簡(jiǎn)單，
- title 就是你要提示用戶的內(nèi)容,，
- icon,，目前只支持”success”、”loading”兩個(gè)屬性,，
- image 自定義圖片,如果設(shè)置了image圖片就會(huì)頂替掉icon的圖片
- mask 是否顯示透明蒙層,，換句話說就是設(shè)置當(dāng)Toast顯示的時(shí)候，用戶可不可以點(diǎn)擊其他按鈕,，默認(rèn)是不顯示透明蒙層
wx.switchTab 跳轉(zhuǎn)到購(gòu)物車界面,，詳解請(qǐng)看下面的知識(shí)小課堂

知識(shí)小課堂

css樣式的復(fù)用：@import “tab/tab.wxss”;
最近遇到一個(gè)問題，就是同一個(gè)頁面有用到別的頁面的樣式,，這時(shí)候最笨的方式是,，把別的頁面的樣式拷貝過來，但是這樣會(huì)導(dǎo)致代碼冗余量太大,，還有一個(gè)是寫在app.wxss里面,，這個(gè)大家都可以共用，但是這個(gè)也不太好就是,，所有有用到復(fù)用的就全寫在app.wxss,這樣會(huì)導(dǎo)致該樣式過于臃腫,，不利于代碼的閱讀，這時(shí)候@import,，就派上用場(chǎng)了,，只需要在xxx.wxss頁面加入@import “tab/tab.wxss”;這樣你就可以引用tab.wxss里面類的屬性了
幾個(gè)界面跳轉(zhuǎn)的區(qū)分
- wx.navigateTo(OBJECT) 保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面
- wx.redirectTo(OBJECT) 關(guān)閉當(dāng)前頁面,，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面
- wx.switchTab(OBJECT) 跳轉(zhuǎn)到 tabBar 頁面,，并關(guān)閉其他所有非 tabBar 頁面
- wx.navigateBack(OBJECT) 關(guān)閉當(dāng)前頁面，返回上一頁面或多級(jí)頁面,。
  通過上面的解釋,，我們可以知道，我們底部懸浮欄中購(gòu)物車的跳轉(zhuǎn)應(yīng)該用wx.switchTab,，因?yàn)樗且D(zhuǎn)到購(gòu)物車tab頁面

總結(jié)

今天講解的內(nèi)容有點(diǎn)多,，大家回去好好消化吧，反正我要說的是,，詳情頁的知識(shí)點(diǎn)是個(gè)大頭,，絲毫不遜色與首頁的內(nèi)容，提前穿插一些知識(shí)點(diǎn),，方便下一節(jié)的深入講解,，好了,，今天就到這，祝大家周末愉快~

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： cyfanz > 《0小程序》

舉報(bào)/認(rèn)領(lǐng)