微信小程序大图酒类商品详情页面设计制作开发教程

本文给大家带来的是微信小程序大图酒类商品详情页面设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/wineProcess/orderWineDetail.wxml-->
<view class="container">
  <view class="swiper-box">
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true" style="height:500rpx;">
        <block wx:for="{{background}}">
          <swiper-item>
            <view class="banner" >
               <image src="{{item}}"></image>
            </view>
          </swiper-item>
        </block>
      </swiper>
      <view class="shopCart" bindtap="goShopCart">
         <image src="/assets/images/orderBox.png"></image>
          <view class="shopCart-num font-color-c24e4e">0</view>
      </view>
     
   </view>   
      <view class="commodityInfo">
         <view class="commodityInfo-hd">
             {{goodsList.name}}
         </view>
          <view class="commodityInfo-des font-color-c24e4e">
          {{goodsList.int}}</view>
           <view class="commodityInfo-bd font-size-12 font-color-999">
               <view style="margin-bottom:26rpx;"><text>香型：{{goodsList.purity}}</text><text>酒精度：{{goodsList.purity}}</text><text>产地：{{goodsList.address}}</text></view>
               <view><text>净含量：{{goodsList.weight}}</text><text>包装规格：{{goodsList.norm}}</text><text></text></view>
           </view>
      </view>
      <view class="choose-amount margin-top-20">
         <view  class="choose-amount-hd"> 
            <image src="/assets/images/Wholeorder@2x.png"></image>
            <text class="font-color-999 imgtext">整件订购</text>
         </view>
         <view class="font-color-c24e4e choose-amount-bd" >¥<text style="font-size:50rpx; margin-left:5rpx;" >{{goodsList.price}}</text><text class="font-color-999" style="margin-left:5rpx;">{{goodsList.norm}}</text></view>
         <view class="choose-amount-ft">
            <image class="add icon" src="/assets/images/Defaultreduction@2x.png"></image>
            <text class="amount font-color-c24e4e" style="font-size:50rpx;">{{goodsList.amount}}</text>
            <image class="sub icon" src="/assets/images/Adddefault@2x.png"></image>
         </view>
      </view>
</view>
<view class="fixed-ft but-group font-color-white">
   <view class="total"><text class="font-size-12">合计金额</text><text>¥<text class="font-size-18">0</text></text></view>
   <view class="but-box font-size-18" bindtap="addCart" style="margin-left:40rpx;" >加入购物车</view>
   <view class="but-box font-size-18" bindtap="playOrder" style="margin-left:20rpx;">直接下单</view>
</view>

二、wxss样式文件代码如下：

/* pages/wineProcess/orderWineDetail.wxss */
.swiper-box{
  position: relative;
  overflow: hidden;

}
.banner{
   width: 100%;
   overflow: hidden;
}
.banner image{
  width: 100%;
  height: 500rpx;
}
.shopCart{
  position: absolute;
  right: 20rpx;
  top: 40rpx;
  z-index: 99;

}
.shopCart image{
  width:100rpx;
  height: 100rpx;
}
.shopCart-num{
    display: inline-block;
    width: 36rpx;
    height: 36rpx;
    font-size: 22rpx;
    color: white;
    line-height: 36rpx;
    border-radius: 36rpx;
    text-align: center;
    position: absolute;
    right: 2rpx;
    background-color: #c24e4e;
}
.commodityInfo{
  line-height: 1;
  padding: 30rpx;
  background-color: #fff;
}
.commodityInfo-des{
  margin: 30rpx 0  40rpx;

}
.commodityInfo-bd view{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content:space-between;
}
.commodityInfo-bd view text{
  display: inline-flex;
  flex: 1;
}

.but-group{
  background-color: rgba(0, 0, 0, 0.7);
  height: 140rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 30rpx 0 45rpx;
}
.but-group .total{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

}
.but-group .but-box{
  background-color: #c24e4e;
  width: 260rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
}
.choose-amount{
  height: 160rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding:0 30rpx;

}
.choose-amount .choose-amount-hd{
  margin-right: 10rpx;
  position: relative;
}
.choose-amount-hd .imgtext{
  display: inline-block;
  position: absolute;
  bottom: 10rpx;
  left: 0;
  font-size:20rpx;
  width: 100rpx;
  text-align: center;
  

}
.choose-amount .choose-amount-hd image{
  width: 100rpx;
  height: 100rpx;
}
.choose-amount .choose-amount-bd,.choose-amount .choose-amount-ft{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  
}
.choose-amount .choose-amount-bd{
  margin-right: 30rpx;
}
.choose-amount-ft{
   flex: 1;
}

.choose-amount-ft .icon{
  width: 100rpx;
  height: 100rpx;
}

三、js页面代码如下：

// pages/wineProcess/orderWineDetail.js
Page({
  data:{
    background: ['http://img1.imgtn.bdimg.com/it/u=66250564,3253305393&fm=21&gp=0.jpg', 'http://pic.58pic.com/58pic/14/27/45/71r58PICmDM_1024.jpg', 'http://img1.imgtn.bdimg.com/it/u=66250564,3253305393&fm=21&gp=0.jpg'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 3000,
    duration: 1200
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
     this.setData({
         goodsList:{
          id:1,
          name:'永泰老酒1915 六瓶/件',
          int:'产品或者一句话描述',
          img:'/assets/testimages/timg1.jpg',
          purity:'53%vol',
          weight:'500ml/瓶',
          norm:'6瓶/ 件',
          price:2699,
          fragrance:'酱香型',
          address:'仁怀市茅台镇',
          amount:20
        }
     }) 
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  addCart(){
    wx.navigateTo({
      url: 'shopCart'
    })
  },
  goShopCart(){
    wx.navigateTo({
      url: 'shopCart'
    })
  }
})

模板简介：该模板名称为【微信小程序大图酒类商品详情页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。