哈嘍，大家好，今天要進入新篇章啦，商品詳情頁，這個可是個大模塊，要分好幾次才能講解清楚，現在我們先進行第一講，老規矩，先上效果圖
商品詳情頁.gif
有木有很酷炫啊，下面由代碼君教你如何實現。
詳情頁布局
看效果圖，可以知道詳情頁包含以下幾個模塊，banner、標題欄、選擇購買欄、商品評價、商品詳情、還有一個底部懸浮欄，這里比較難的是底部懸浮欄，剩下的我們之前模塊我們之前就有布局過
- 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">請選擇購買數量</text>
<view class="separate"></view>
<text>商品評價</text>
<text class="text-remark">東西還可以，好評~</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">加入購物車</button>
<button class="button-red" bindtap="immeBuy" formType="submit">立即購買</button>
</view>
這里面要講解的有
- banner里面新加入一個東西bindtap="previewImage"，圖片預覽功能，就是查看大圖，至于事件是如何處理的，請查看detail.js 里的previewImage事件
- 底部懸浮欄里面的那個收藏按鈕，我們要如何做用戶點擊一下就更換收藏圖標吶，本文是通過isLike這個Boolean值來做判斷的，用戶每觸發一次addLike事件，就更換一次Boolean值，按鈕的更換效果就實現了
- detail.wxss
page {
display: flex;
flex-direction: column;
height: 100%;
}
/* 直接設置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 設置邊界圓角，設置的大小就是邊角的弧度，該屬性可以應該在按鈕活圖片上，由于加入購物車和立即購買是放在底部所以最好是直角，所以把border-radius設置為0
-
display inline-block值代表混合塊和內聯特性。
盒子的外部被視為內聯元素。因此，不會為元素創建新行。
框的內部被視為塊元素，并應用諸如寬度，高度和邊距的屬性。 - align-items 設置了flex容器的對齊方式。一般設置為center居中
- z-index 屬性指定一個元素的堆疊順序。如果值設置為正數，越大這對應的view也會越在上面一層，負數就是在底層，當前頁面z-index 為0，所以要底部導航欄要浮在上面就把z-index 設置大于0就好
- detail.js
Page({
data: {
isLike: true,
// banner
imgUrls: [
"http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
"http://mz.djmall.xmisp.cn/files/product/20161201/148057922659_middle.jpg",
"http://mz.djmall.xmisp.cn/files/product/20161201/148057923813_middle.jpg",
"http://mz.djmall.xmisp.cn/files/product/20161201/148057924965_middle.jpg",
"http://mz.djmall.xmisp.cn/files/product/20161201/148057925958_middle.jpg"
],
indicatorDots: true, //是否顯示面板指示點
autoplay: true, //是否自動切換
interval: 3000, //自動切換時間間隔,3s
duration: 1000, // 滑動動畫時長1s
// 商品詳情介紹
detailImg: [
"http://7xnmrr.com1.z0.glb.clouddn.com/detail_1.jpg",
"http://7xnmrr.com1.z0.glb.clouddn.com/detail_2.jpg",
"http://7xnmrr.com1.z0.glb.clouddn.com/detail_3.jpg",
"http://7xnmrr.com1.z0.glb.clouddn.com/detail_4.jpg",
"http://7xnmrr.com1.z0.glb.clouddn.com/detail_5.jpg",
"http://7xnmrr.com1.z0.glb.clouddn.com/detail_6.jpg",
],
},
//預覽圖片
previewImage: function (e) {
var current = e.target.dataset.src;
wx.previewImage({
current: current, // 當前顯示圖片的http鏈接
urls: this.data.imgUrls // 需要預覽的圖片http鏈接列表
})
},
// 收藏
addLike() {
this.setData({
isLike: !this.data.isLike
});
},
// 跳到購物車
toCar() {
wx.switchTab({
url: '/pages/cart/cart'
})
},
// 立即購買
immeBuy() {
wx.showToast({
title: '購買成功',
icon: 'success',
duration: 2000
});
},
})
介紹幾個系統API的接口
-
wx.previewImage 圖片預覽功能
- current 傳入當前圖片路徑
- urls 圖片數組urls
-
wx.showToast
Toast 吐司，做前端都知道，這個是一定會用到的，就是彈出半透明框，和用戶進行交互，wx.showToast調用很簡單，- title 就是你要提示用戶的內容，
- icon，目前只支持"success"、"loading"兩個屬性，
- image 自定義圖片,如果設置了image圖片就會頂替掉icon的圖片
- mask 是否顯示透明蒙層，換句話說就是設置當Toast顯示的時候，用戶可不可以點擊其他按鈕，默認是不顯示透明蒙層
- ** wx.switchTab** 跳轉到購物車界面，詳解請看下面的知識小課堂
知識小課堂
- css樣式的復用：@import "tab/tab.wxss";
最近遇到一個問題，就是同一個頁面有用到別的頁面的樣式，這時候最笨的方式是，把別的頁面的樣式拷貝過來，但是這樣會導致代碼冗余量太大，還有一個是寫在app.wxss里面，這個大家都可以共用，但是這個也不太好就是，所有有用到復用的就全寫在app.wxss,這樣會導致該樣式過于臃腫，不利于代碼的閱讀，這時候@import，就派上用場了，只需要在xxx.wxss頁面加入@import "tab/tab.wxss";這樣你就可以引用tab.wxss里面類的屬性了 - 幾個界面跳轉的區分
- wx.navigateTo(OBJECT) 保留當前頁面，跳轉到應用內的某個頁面
- ** wx.redirectTo(OBJECT)** 關閉當前頁面，跳轉到應用內的某個頁面
- wx.switchTab(OBJECT) 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面
-
wx.navigateBack(OBJECT) 關閉當前頁面，返回上一頁面或多級頁面。
通過上面的解釋，我們可以知道，我們底部懸浮欄中購物車的跳轉應該用wx.switchTab，因為他是要跳轉到購物車tab頁面
總結
今天講解的內容有點多，大家回去好好消化吧，反正我要說的是，詳情頁的知識點是個大頭，絲毫不遜色與首頁的內容，提前穿插一些知識點，方便下一節的深入講解，好了，今天就到這，祝大家周末愉快~
