微信小程序订酒商品列表页设计制作开发教程

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

一、wxml页面代码如下：

<!--pages/orderWine/orderWine.wxml-->
<view class="container">
    <view class="weui-tab bg-color-white ">
     <view class="fixed">
        <view class="userInfo" bindtap="showModal">
            <image class="img" src="{{chooseFactory.img}}"></image>
            <view class="Info">
                <text class="font-color-white">{{chooseFactory.name}}</text>
                <text class="font-color-d9d9d9">已签约为 {{chooseFactory.Identity}}</text>
            </view>
            <image class="choose" src="/assets/images/buy_cf_ico@2x.png"  wx:if="{{!showModalStatus}}"></image>
            <image class="choose" src="/assets/images/buy_cf_ico_top2x.png" wx:else></image>
        </view>
    </view>     
        <view class="weui-navbar">
            <block wx:for-items="{{tabs}}" wx:key="{{index}}">
                <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
                <view class="weui-navbar__title">{{item}}</view>
                </view>
            </block>
            <view class="weui-navbar__slider" style="left: {{sliderLeft}}px;  transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
        </view>
        <view class="weui-tab__panel">
        <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
            <scroll-view scroll-y="false"  bindscrolltoupper="refresh" bindscrolltolower="loadmore" bindscroll="scroll" scroll-top="{{scrolltop}}">
                <navigator url="../wineProcess/orderWineDetail" class="goodsList " hover-class="weui-cell_active" wx:for="{{goodsList.list}}" wx:for-item="goodlist" data-id="{{goodlist.id}}">
                     <image class="listimg" src="{{goodlist.img_url}}"></image>
                     <view class="listinfo">
                        <text class="font-color-hei title">{{goodlist.title}}</text>
                        <text class="font-color-999 font-size-12" style="margin-bottom:18rpx;">酒精度：{{goodlist.purity}}</text>
                        <text class="font-color-999 font-size-12">净含量：{{goodlist.weight}}{{goodlist.weight_unit}}</text>
                      <view class="listinfo-ft"> <text class="font-color-999 font-size-12">包装规格：{{goodlist.pack_spec}}{{goodlist.pack_spec_unit}}</text><text class="font-color-c24e4e ">¥<text style="font-size:40rpx;">{{goodlist.price}}</text></text></view>
                     </view>
                </navigator>
            </scroll-view>
        </view>
        <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
            <scroll-view scroll-y="false"  bindscrolltoupper="refresh" bindscrolltolower="loadmore" bindscroll="scroll" scroll-top="{{scrolltop}}">
            2222
            </scroll-view>
        </view>
        <view class="weui-tab__content" hidden="{{activeIndex != 2}}">
            <scroll-view scroll-y="false"  bindscrolltoupper="refresh" bindscrolltolower="loadmore" bindscroll="scroll" scroll-top="{{scrolltop}}">
            33333
            </scroll-view>
        </view>
    </view>
 </view>

</view>


<!--点击选择 显示遮罩层-->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}">
</view>
<!--弹出选择存-->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
     <view class="factoryList"  wx:for="{{factoryList}}" wx:for-item="list" data-id="{{list.id}}" bindtap="chooseFactory" >
         <image class="img" src="{{list.img}}"></image>
         <view class="Info">
              <text class="font-color-hei">{{list.name}}</text>
              <text class="font-color-999" >已签约为 {{list.Identity}}</text>
         </view>
         <image class="chooseicon" src="/assets/images/buy_cf_choose_on@2x.png"  wx:if="{{chooseFactory.id==list.id}}"></image>
         <image class="chooseicon" src="/assets/images/buy_cf_choose_off@2x.png"  wx:else></image>
     </view>
</view>

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

/* pages/orderWine/orderWine.wxss */

.userInfo,.factoryList{
  padding: 20rpx;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
}
.fixed{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 21;
    overflow: hidden;
}
.userInfo{ 
   background-color:#c24e4e;
   height: 180rpx;
}
.factoryList{
    background-color: #fff;
    border-top:2rpx solid #eeeeee; 
}
.userInfo .img,.factoryList .img{
    width: 120rpx;
    height: 120rpx;
    margin: 10rpx 20rpx 10rpx;
}
.userInfo .Info,.factoryList .Info{
   height: 120rpx;
   margin: 10rpx 0rpx 10rpx;
   display: flex;
  flex-direction:column;
  justify-content: space-around;
}
.choose{
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    z-index:22;
}
.chooseicon{
     width: 60rpx;
    height: 60rpx;
    position: absolute;
    top: 30rpx;
    right: 30rpx;
}
.weui-navbar{
    background-color: #fff;
    line-height: 1;
    font-size: 30rpx;
    padding:0;
    border-bottom:0px; 
}
.weui-navbar__item{
     padding: 30rpx 0;
}
.weui-navbar__item.weui-bar__item_on{
  color:#c24e4e;
}
.weui-navbar__slider{
    width: 33.33%;
}
.weui-navbar__slider{
    background-color:#c24e4e;  
}
.weui-tab__panel{
    padding-top: 90rpx;
}


/*goods list*/
.weui-tab{
    margin-top: 180rpx;
}
.weui-tab__content{
     line-height:1;

}
.listinfo{
    display: flex;
    flex-direction: column;
    flex: 1;
}
.listinfo .title{
    margin: 20rpx 0px;
}

.goodsList{
    padding: 20rpx;
    display: flex;
    flex-direction: row;
    border-top:2rpx solid #eeeeee;
}
.listinfo-ft{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.goodsList .listimg{
    width: 180rpx;
    height: 180rpx;
    margin-right: 20rpx;
}
.weui-navbar{
    position: fixed;
    top: 180rpx;
}

/*mask*/
.commodity_screen {
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
 background:#000;
 opacity:0.2;
 overflow:hidden;
 z-index:98;
 color:#fff;
}

/*choose*/
.commodity_attr_box {
    width:100%;
    min-height:30px;
    overflow:hidden;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    background:#fff;
    padding-top:20rpx;
}

三、js页面代码如下：

// pages/orderWine/orderWine.js
Page({
  data:{
    showModalStatus:false,             //是否显示mask   和选择菜单
    chooseFactory:{},                   //选中的厂家
    factoryList:{},                     //厂家列表
    goodsList:{},                       //商品列表
    tabs: ['商品列表', '订制酒专区','企业介绍'],
    activeIndex: "0",
    sliderOffset: 0,
    sliderLeft: 0 ,
    windowHeight:null,
    
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      goodsList:{
        "hasnext": 0,
        "list": [ {
          "id": 606,
          "factory_id": 1,
          "title": "复合肥（12-18-15-S）",
          "weight": "600ml",
          "weight_unit": "瓶",
          "pack_spec": "3瓶",
          "pack_spec_unit": "件",
          "price": 60,
          "image": {
            "product_id": 606,
            "imgurl": "http://wine.bodata.cn/product/1.jpg"
          }
        },
        {
          "id": 605,
          "factory_id": 1,
          "title": "磷酸二铵（玛拉松16-44-0）",
          "weight": "500ml",
          "weight_unit": "瓶",
          "pack_spec": "5瓶",
          "pack_spec_unit": "件",
          "price": 50,
          "image": null
          }]
       },
      

    })
    wx.getSystemInfo({
      success: (res)=> {
        console.log(res.windowHeight)
        this.setData({
           windowHeight:res.windowHeight
         })
      }
    })
    //console.log(this.data.factoryList[0])
    let chooseFactory=wx.getStorageSync('chooseFactory') || this.data.factoryList[0];
    this.setData({
      chooseFactory:chooseFactory
    })
  },
  tabClick(e) {
    //tab切换
        this.setData({
            sliderOffset: e.currentTarget.offsetLeft,
            activeIndex: e.currentTarget.id
        });
 },
  showModal(){
     //显示遮罩层 选择界面
      var animation = wx.createAnimation({
              duration: 300,
              timingFunction: "ease",
              delay: 0
      })
      this.animation = animation
      animation.translateY(-300).step()
      this.setData({
              animationData: animation.export(),
              showModalStatus: true
      })
      setTimeout(function () {
              animation.translateY(0).step()
              this.setData({
                      animationData: animation.export()
              })
      }.bind(this), 300)
      
  },
  hideModal(){
    //隐藏遮罩层
     var animation = wx.createAnimation({
              duration: 300,
              timingFunction: "ease",
              delay: 0
      })
      this.animation = animation
      animation.translateY(-300).step()
      this.setData({
          animationData: animation.export(),
      })
      setTimeout(function () {
              animation.translateY(0).step()
              this.setData({
                      animationData: animation.export(),
                      showModalStatus: false
              })
      }.bind(this), 300)
  },
  chooseFactory(e){
    //console.log(e.currentTarget.dataset.id)
    let index= this.data.factoryList.findIndex((value, index, arr)=>{
       return value.id==e.currentTarget.dataset.id
    })
    this.setData({
        chooseFactory:this.data.factoryList[index]
    })
   
    setTimeout(()=>{this.hideModal()},200)

  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  onReachBottom:function(){
    // 上拉触底时触发事件
    wx.showLoading({
      title: '加载中',
    }) 
    setTimeout(function(){
      wx.hideLoading()
    },2000)
  }
 

})

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