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

maker一下自己捣鼓的商品详情页，主要是选择商品类型的交互和样式，点击不同类型切换图片和文字，商品增加减少，还有商品预览图片（本地图片无法预览！！！）。。

源码下载：http://download.csdn.net/download/dknightl/9939872

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>         </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;}