微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片）

1.效果图

2.wxml

<view class="swiper_area">
<swiper indicator-dots="{{indicatorDots}}" indicator-color="#fff"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item data-img="{{item.flower_image}}" bindtap="seeSwiperAll">
<image data-id="{{item.flower_id}}" src="{{item.flower_image}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
</view>

<view class="goods_infor_top">
<view class="goods_title">{{good.good_name}}
</view>
<view class="good_description">
<text class="description_content">{{good.good_mark}}</text>
</view>

<view class="good_info_bottom display-flex-row" style="">
<view class="good_price">
<text class="color_ff6700 good_dis_price pdr10rpx display-ib">¥{{goodPrice}}/{{good.good_unit}}</text>
<block wx:if="{{good.good_column=='100903'}}">
<text class="good_orin_price td-lt display-ib">
¥{{goodOrinPrice}}
</text>
</block>
</view>
<view class="sale">
<text class="good_sale_count display-ib" style="">销量:{{good.good_sell}}</text>
</view>
</view>

</view>

<view bindtap="viewFlowerArea" class="choose_catalog_area bg_fff display-flex-row">
<view class="fl">选择花色:
{{flowerNameSelect}}
</view>
<image class="arrow_right fr" src="../../image/icon-arrow.png"/>
</view>

<view  class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view  animation="{{animationData}}"
class="catalog_area bg_fff {{isHidden == 1 ? 'display-block':'display-none'}}">

<view class="catalog_title">
<image class="thumbnails" src="{{flowerImgSelect}}" mode="aspectFill"></image>
<view class="info_tip">
<view class="good_dis_price">¥{{goodPrice}}</view>
<view class="choosed_catalog text-hidden">{{flowerNameSelect}}</view>
</view>
<image class="cancel" bindtap="hideModal" src="../../image/delete.png"></image>
1aa70

</view>

<scroll-view  scroll-y="true" style="height: 640rpx;margin-top:175rpx">

<view class="info_choose">
<view class="catalog_name">花型</view>

<view class="catalog_items display-flex-row" >
<block wx:for="{{goodflowers}}">
<text data-img="{{globalData.root}}{{item.flower_image}}" data-select="{{item.flower_id}}"  data-flower-name="{{item.flower_name}}"
class="{{item.flower_id == flowerSelect ? 'active':''}} catalog_item"
bindtap="chooseFlower">{{item.flower_name}}
</text>
</block>
</view>

<view class="borderTop"></view>
<view class="catalog_count display-flex-row" >
<view class="catalog_name">
购买数量
</view>
<view class="count_control display-flex-row">
<span class="item_reduce item_btn" bindtap="{{goodNum>1?'goodReduce':''}}">-</span>
<span class="item_num"  bindtap="carRemove">{{goodNum}}</span>
<span class="item_add item_btn" bindtap="goodAdd">+</span>
</view>
</view>
<view class="borderTop"></view>

</view>

</scroll-view>

<view class="btn_hidden"></view>
<view class="btn_area display-flex-row" >
<view bindtap="addCart" class="goods_half_half bg_09bb07 color_fff">加入购物车</view>
<view bindtap="saveOrder" class="goods_half_half bg_ff6700 color_fff">立即购买</view>
</view>

</view>

<view class="container width100 ">
<view class="tab bg_fff">
<view class="tab-content mgb10rpx">
<view  class="btn right_btn {{select==0?'active':''}}" data-area="0" bindtap="changeArea">商品详情</view>
<view  class="btn left_btn {{select==1?'active':''}}" data-area="1" bindtap="changeArea">商品参数</view>
</view>
</view>

<view wx:if="{{0==select}}">

</view>

<view wx:if="{{1==select}}" class="param_area"></view>
</view>

<view class="{{isHidden == 0 ? 'display-block':'display-none'}}">
<view class="goods_bottom"></view>
<view class="goods_bottom_btn display-flex-row">
<view bindtap="addCart" class="goods_half_half bg_09bb07 color_fff">加入购物车</view>
<view bindtap="saveOrder" class="goods_half_half bg_ff6700 color_fff">立即购买</view>
</view>

</view>

3.js

Page({
data: {
//商品信息，假装请求到的信息
orinGoodMsg: { "good": { "visible": "101", "tourist_dis_price": 510, "good_identity": "00204", "good_sell": "100", "good_brand": "", "last_modify_time": "2017-08-08 20:10:05", "good_place": "101", "good_type": "2", "good_display_img": "../../image/swiper.jpg", "dealer_price": 0, "last_modify_id": "1", "good_id": "17", "good_fill": "", "good_number": 35, "good_status": "9001", "good_unit": "套", "good_format": "", "good_column": "100902", "wholesaler_dis_price": 255, "dealer_dis_price": 265, "tourist_price": 0, "good_name": "绚彩活性棉提花四件套", "wholesaler_price": 0, "good_mark": "床单270x270cm被套200x230cm枕套48x74+6cm" }, "goodflowers": [{ "flower_name": "朝花夕拾", "flower_id": "11d75c6a560a4345b232706f7642de22", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "美丽相约", "flower_id": "3994afdb0427425d93bbba6e881601c3", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "清水佳人", "flower_id": "3ebc1032eb5d477b9e2bf508918f3d2b", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "意境幽蓝", "flower_id": "425cc030c0574344a62be9674c854ee6", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "出水芙蓉", "flower_id": "4ea02d08e2464ba681e4861451a7a2f7", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "国色天香", "flower_id": "5501ed259aa6476eafff940e9cf16e5a", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "春日畅想", "flower_id": "85d540c79c244e40bb88744cdd1aa5ce", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "花叶细雨", "flower_id": "877e01699f30449ebf99bfe689711159", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "琪花摇曳", "flower_id": "979e579413ea467fb363a1c85f36f092", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "絮语飘香", "flower_id": "ba7ef47a8fec4ec192d958d3c400bf7b", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "凝香雨露", "flower_id": "d24fa5772f754cfbb6650df587167c2f", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "花开柔情", "flower_id": "dbd7f42a97c04c0aa1bc24b27d2546d3", "flower_image": "../../image/swiper.jpg", "good_id": "17", "flower_identity": "" }, { "flower_name": "幻彩花园", "flower_id": "eff884ebeb7c42008f38a58785818031", "flower_image": "../../image/flower.jpg", "good_id": "17", "flower_identity": "" }], "roleType": "2", "isAdmin": true },

good: {//商品

},
mainImg: '',//主图
goodPrice: 99.99,//商品价格
goodOrinPrice: 999.99,
goodflowers: [

],
imgUrls: [//轮播图

],
chooseFlowers: [//选中的花色

],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
flowerImgSelect: '',//选中的花色图片
flowerNameSelect: "",//
flowerSelect: 0,//判断是否选中
isHidden: 0,
animationData: {},//选择动画
showModalStatus: false,//显示遮罩
goodNum: 1,//商品数量
select: 0,//商品详情、参数切换
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
if (wx.showLoading) {
wx.showLoading({
title: '加载中',
})
}

var data = that.data.orinGoodMsg;//写死的商品信息

var goodBaseMsg = data.good;//商品基本信息
var goodflowersMsg = data.goodflowers;//商品花色信息
var swiperAy = [];//伦比途

var goodPrice = 999.99;//显示价格
var goodOrinPrice = 999.99;//划线价格

for (var i = 0; i < goodflowersMsg.length; i++) {
var jo = {
flower_image: goodflowersMsg[i].flower_image,
flower_id: goodflowersMsg[i].flower_id,
}

swiperAy.push(jo);
};
that.setData({//商品
mainImg: goodBaseMsg.good_display_img,
flowerImgSelect: goodBaseMsg.good_display_img,
good: goodBaseMsg,
goodflowers: goodflowersMsg,
imgUrls: swiperAy,
goodPrice: goodPrice,
goodOrinPrice: goodOrinPrice,

});
if (wx.hideLoading()) {
wx.hideLoading()
}

},
/**选择花色 */
chooseFlower: function (data) {
var that = this;
var flower_id = data.currentTarget.dataset.select;
var flower_name = data.currentTarget.dataset.flowerName;

that.setData({//把选中值，放入判断值中
flowerNameSelect: flower_name,
flowerSelect: flower_id
})
var str = flower_id + ',' + flower_name;
var chooseFlowers = that.data.chooseFlowers;
chooseFlowers = [];
chooseFlowers.push(str);
that.setData({
chooseFlowers: chooseFlowers,
flowerImgSelect: data.currentTarget.dataset.img
})

},
/**点击选择花色按钮、显示页面 */
viewFlowerArea: function (data) {
var that = this;
var animation = wx.createAnimation({//动画
duration: 500,//动画持续时间
timingFunction: 'linear',//动画的效果 动画从头到尾的速度是相同的
})
animation.translateY(0).step()//在Y轴偏移tx，单位px

this.animation = animation
that.setData({
showModalStatus: true,//显示遮罩
animationData: animation.export()
})
that.setData({//把选中值，放入判断值中
isHidden: 1,
})
},
/**隐藏选择花色区块 */
hideModal: function (data) {

var that = this;
that.setData({//把选中值，放入判断值中
showModalStatus: false,//显示遮罩
isHidden: 0,
})

},
goodAdd: function (data) {

var that = this;
var goodCount = that.data.goodNum + 1;
that.setData({//商品数量+1
goodNum: goodCount
})

},
goodReduce: function (data) {

var that = this;
var goodCount = that.data.goodNum - 1;
that.setData({//商品数量+1
goodNum: goodCount
})

},
/**商品详情、参数切换 */
changeArea: function (data) {
var that = this;
var area = data.currentTarget.dataset.area;
that.setData({ "select": area });

},
/**
* 加入购物车
*/
addCart: function (data) {
var that = this;
var thatData = that.data;
var ja = thatData.chooseFlowers;//选中的花色id
var good_id = thatData.good.good_id;//good_id
var good_name = thatData.good.good_name;//good_name
var gn = thatData.goodNum;//数量
var good_price = thatData.goodPrice;//价格

if (ja.length > 0) {
wx.showToast({
title: '成功！',
duration: 2000,
})

} else {
wx.showToast({
title: '您还没有选择花色哦~',
duration: 2000,
})
}

},
/**
* 生成订单
*/
saveOrder: function (data) {
var that = this;
var thatData = that.data;
var ja = thatData.chooseFlowers;//选中的花色
var good_id = thatData.good.good_id;//good_id
var good_name = thatData.good.good_name;//good_name
var gn = thatData.goodNum;//数量
var good_price = thatData.goodPrice;//价格v
var goodDisplayImg = thatData.mainImg;//主图

if (ja.length > 0) {

wx.showToast({
title: '成功！',
duration: 2000,
})
} else {
wx.showToast({
title: '您还没有选择花色哦~',
duration: 2000,

})

}

},
/**
* 查看轮播图片
*/
seeSwiperAll: function (e) {
this.seePreviewImg(0, e.currentTarget.dataset.img)
},
/**
* 查看花色图片
* */
seeFlowersAll: function (e) {
this.seePreviewImg(1, e.currentTarget.dataset.img)
},
/**
* 预览图片
*
* 无法显示本地图片！！！！！！！
* 无法显示本地图片！！！！！！！
* 无法显示本地图片！！！！！！！
*
* @pd 0表示轮播图 、 1表示花色
*/
seePreviewImg: function (pd, showImg) {
var array = [];
var that = this;
if (pd == 0) {
var imgArray = that.data.imgUrls;
for (var i = 0; i < imgArray.length; i++) {
array.push(imgArray[i].flower_image)
}
} else if (pd == 1) {
var imgArray = that.data.imgArray;
for (var i = 0; i < imgArray.length; i++) {
array.push(imgArray[i].url)
}
}

wx.previewImage({
current: showImg, // 当前显示图片的http链接
urls: array // 需要预览的图片http链接列表
})
},
})

wxss

.width50{
width:50% !important;
}
.width100{
width:100%
}
.fl{
float: left;
}
.fr{
float: right;
}

.display-flex-row{
display:flex;
flex-direction:row;
}
.display-flex-column{
display:flex;
flex-direction:column;
}
.display-ib{
display:inline-block !important;
}
.display-block{
display:block !important;
}
.display-none{
display: none !important;
}

.bg_fff{
background-color: #ffffff;

}
.bg_ff0036{
background-color:#ff0036;/**红**/
}
.bg_ff6700{
background-color:#ff6700;/**橘**/
}
.bg_09bb07{
background-color: #09bb07;/**绿**/
}
.bg_888{
background-color: #888888;/**灰**/
}

.color_ff6700{
color:#ff6700;
}
.color_888888{
color:#888888;
}

.swiper_area,.swiper_area swiper{
height: 400rpx;
}
.swiper-item{
display: block;
}
.slide-image {
width: 100%;
}
swiper {
width: 100%;
}
.goods_title {
color: #535353;
padding: 20rpx 20rpx 10rpx 20rpx;
line-height: 1.2;
font-weight: bold;
}
.good_description{
font-size: 0.7em;
padding:0 20rpx;
color: #b0b0b0;
}
.goods_infor_top {
background-color: #FFF;
margin-bottom:20rpx;
}
.good_info_bottom{
justify-content:space-between;
padding:20rpx 20rpx;
}
.good_dis_price {
color: #ff6700;
font-weight: bold;
}
.good_info_bottom .good_orin_price {
font-size: 0.7em;
margin-left: 10rpx;
text-decoration: line-through;
color: #b0b0b0;
}
.good_info_bottom .good_sale_count {
font-size: 0.7em;

}

.admin_good_price{
padding:20rpx;
}
.admin_good_price .admin_price_box{
justify-content: space-between;
}
.admin_good_price .admin_orin_price{
font-size: 0.8em
}

.goods_deliver {
padding: 10px;
border-top: 1px solid #E5E5E5;
color: #676767;
}
.goods_collect_btn {
height: 40px;
width: 70px;
position: absolute;
right: 0;
top: 10px;
border-left: 1px solid #E5E5E5;
text-align: center;
font-size: 12px;
line-height: 14px;
}
.goods_collect_img {
width: 24px;
height: 24px;
}

.choose_catalog_area{
font-size:0.9em;
justify-content:space-between;
padding:20rpx;
margin-bottom:20rpx;
height:60rpx;
line-height: 60rpx;
}
.choose_catalog_area .arrow_right{
margin-top:14rpx;
width:30rpx;
height:30rpx;
}

.commodity_screen{
background-color:rgba(0,0,0,0.5);
width: 100%;
height: 100%;
opacity:0.5;
position: fixed;
z-index: 666;
bottom:0;
}

.catalog_area{
min-height: 900rpx;
max-height: 900rpx;
padding:20rpx;
position: fixed;
z-index: 888;
bottom:0;
}

.catalog_area .info_tip{
margin-top:50rpx;
margin-left: 220rpx;
}
.catalog_area .catalog_title{
position: fixed;
top: 0;
width: 710rpx;
height: 160rpx;
border-bottom:1px solid #e5e5e5;
padding-bottom: 20rpx;
}
.catalog_area .catalog_title .thumbnails{
width: 200rpx;
height:200rpx;
position: absolute;
top:-40rpx;
border:#b0b0b0;
}
.catalog_area .catalog_title .cancel{
width: 40rpx;
height:40rpx;
position: absolute;
top:20rpx;
right:0;
}
.catalog_area  .choosed_catalog{
font-size: 0.8em;
}
.catalog_area .info_choose{
width:710rpx;

}
.catalog_area .info_choose .catalog_name{
padding:10rpx 0;
font-weight: bold;
}

.catalog_area .info_choose .catalog_name_desc{
margin-top:10rpx !important;
}

.catalog_area .info_choose .borderTop{
margin-top:25rpx;
border-top:1px solid #e5e5e5;
}
.catalog_area .info_choose .catalog_items{
font-size: 0.8em;
flex-wrap:wrap;
}
.catalog_area .info_choose .catalog_items .catalog_item{
padding:15rpx;
border:1px dashed #b0b0b0;
margin-top:15rpx;
margin-right: 20rpx;
}
.catalog_area .info_choose .catalog_items .active{
border:1px solid #ff6700;
color:#ff6700 !important;
}

.catalog_area .catalog_count{
justify-content:space-between;
height:100rpx;
line-height: 100rpx;
}
.catalog_area .catalog_count .catalog_name{
font-weight: bold;
padding:12.5rpx 0 0 0;
}
.catalog_area .catalog_count .count_control{
margin-top:20rpx;
height:80rpx;
}

.catalog_area .btn_area{
width: 100%;
margin:0 -20rpx;
position: fixed;
bottom: 0;
}

.catalog_area .item_btn {
display: inline-block;
width: 80rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border: 2rpx solid #b0b0b0;

}

.catalog_area .item_num {
display: inline-block;
width: 80rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border-top: 2rpx solid #b0b0b0;
border-bottom: 2rpx solid #b0b0b0;
font-size: 28rpx;
color: #929292;
}

.tab{

width:710rpx;
padding:0 20rpx;
height: 80rpx;
line-height: 80rpx;

}

.tab .tab-content{
display:flex;
flex-direction:row;
justify-content:space-between;
}
.container {
margin-top:25rpx;
}

.tab .btn{
width:353rpx;
color: #888888;
text-align: center;
border-bottom:2rpx solid #f5f5f5;
}
.tab .right_btn{
border-right:2rpx solid #f5f5f5;
}
.tab .left_btn{
border-left:2rpx solid #f5f5f5;
}
.tab .active{
color: #ff6700 !important;
border-bottom:4rpx solid #ff6700 !important;
}

.goods_infor_pre {
margin-top: 20rpx;
background-color: #FFF;
padding: 10px;
min-height: 40px;
}
.goods_infor_txt {
position: relative;
padding-left: 50px;
font-size: 13px;
line-height: 18px;
}
.goods_infor_brand {
position: absolute;
width: 40px;
height: 40px;
background-image: url(../../image/brand.png);
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center;
left: 0px;
top: 10px;
}
.goods_infor_raw {
margin-top: 20rpx;
background-color: #FFF;
padding: 10px;
}
.goods_infor_item {
font-size: 13px;
line-height: 18px;
}
.goods_infor_item text  {
display: inline-block;
width: 90px;
}
.goods_detail {
padding: 0 10px;
margin-top: 20rpx;
background-color: #FFF;
}
.goods_detail_title {
padding: 10px 0;
font-size: 14px;
}
.goods_bottom {
height: 50px;
}
.goods_bottom_btn {
width: 100%;
position: fixed;
bottom: 0;
height: 50px;
z-index: 99;
background-color: #FFF;
border-top: 1px solid #E5E5E5;
}
.goods_one {
width:50%;
height: 50px;
}
.goods_half_half {
width:50%;
height: 50px;
font-size: 12px;
line-height: 50px;
text-align: center;
color: #FFF;
}

.goods_car_num {
width: 30px;
height: 30px;
margin: 0 auto;
margin-top: 10px;
font-size: 10px;
background-image: url(../../image/car1.png);
background-size: 26px;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.goods_car_num span {
position: absolute;
right: -5px;
display: inline-block;
width: 14px;
height: 14px;
border-radius: 14px;
background-color: #FF0000;
color: #FFF;
text-align: center;
line-height: 14px;
}