微信小程序商城电商整套系列相关推荐：
1、
微信小程序开发页面顶部导航栏制作设计 [图]
2、微信小程序开发底部导航菜单栏的制作设计 [图]
3、
微信小程序开发广告轮播幻灯图制作设计 [图]
4、
微信小程序开发商城电商首页整体布局制作设计 [图]
5、
微信小程序开发分类页面栅格布局制作与设计 [图]
6、
微信小程序开发商品详情页中sku的弹出属性筛选选择框 [图]
7、
微信小程序商品正文详情页整体布局制作与设计 [图]
8、
微信小程序商城电商购物车页面制作与设计 [图]
9、
微信小程序商城电商个人会员中心页面制作设计 [图]
今天主要微信小程序商品正文详情页整体布局制作与设计包含以下几个模块，banner、标题栏、选择购买栏、商品评价、商品详情、还有一个底部悬浮栏，这里比较难的是底部悬浮栏，底部悬浮栏会单独文章进行介绍。先看看做好以后效果图：
一、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;
}
|
以上样式代码以下几点属性需要注意下：
1、align-items 设置了flex容器的对齐方式。一般设置为center居中
2、display inline-block值代表混合块和内联特性。
盒子的外部被视为内联元素。因此，不会为元素创建新行。
框的内部被视为块元素，并应用诸如宽度，高度和边距的属性。
3、z-index 属性指定一个元素的堆叠顺序。如果值设置为正数，越大这对应的view也会越在上面一层，负数就是在底层，当前页面z-index 为0，所以要底部导航栏要浮在上面就把z-index 设置大于0就好
4、border-radius 设置边界圆角，设置的大小就是边角的弧度，该属性可以应该在按钮活图片上，由于加入购物车和立即购买是放在底部所以最好是直角，所以把border-radius设置为0
二、测试数据js文件代码如下：
Page({
data: {
isLike: true,
// banner
imgUrls: [
"http://www.lanrenmb.com/files/product/20161201/148057921620_middle.jpg",
"http://www.lanrenmb.com/files/product/20161201/148057922659_middle.jpg",
"http://www.lanrenmb.com/files/product/20161201/148057923813_middle.jpg",
"http://www.lanrenmb.com/files/product/20161201/148057924965_middle.jpg",
"http://www.lanrenmb.com/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
});
},
})
|
以上js需要了解微信提供几个API的接口作用：
1、wx.showToast
做前端都知道，这个是一定会用到的，就是弹出半透明框，和用户进行交互，wx.showToast调用很简单，
title 就是你要提示用户的内容，
icon，目前只支持”success”、”loading”两个属性，
image 自定义图片,如果设置了image图片就会顶替掉icon的图片
mask 是否显示透明蒙层，换句话说就是设置当Toast显示的时候，用户可不可以点击其他按钮，默认是不显示透明蒙层
|
2、wx.switchTab 跳转到购物车界面，
3、wx.previewImage 图片预览功能
current 传入当前图片路径
urls 图片数组urls
|
三、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>
|
以上代码主要需要了解两点：
1、底部悬浮栏里面的那个收藏按钮，我们要如何做用户点击一下就更换收藏图标呐，本文是通过isLike这个Boolean值来做判断的，用户每触发一次addLike事件，就更换一次Boolean值，按钮的更换效果就实现了
2、banner里面新加入一个东西bindtap=”previewImage”，图片预览功能，就是查看大图，至于事件是如何处理的，请查看detail.js 里的previewImage事件
.jpg)
.jpg)
