|
哈嘍，大家好，今天要進(jìn)入新篇章啦，商品詳情頁，這個可是個大模塊，要分好幾次才能講解清楚，現(xiàn)在我們先進(jìn)行第一講，老規(guī)矩，先上效果圖
有木有很酷炫啊，下面由代碼君教你如何實(shí)現(xiàn)。 ##詳情頁布局 <!-- 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">請選擇購買數(shù)量</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> 這里面要講解的有
####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 樣式屬性
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, //是否自動切換
interval: 3000, //自動切換時間間隔,3s
duration: 1000, //滑動動畫時長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
});
},
// 跳到購物車
toCar() {
wx.switchTab({
url: /pages/cart/cart
})
},
// 立即購買
immeBuy() {
wx.showToast({
title: 購買成功,
icon: success,
duration: 2000
});
},
}) 介紹幾個系統(tǒng)API的接口
##知識小課堂
|
|
|
