微信小程序电梯综合销量价格列表页面样式设计制作开发教程

本文给大家带来的是微信小程序电梯综合销量价格列表页面样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--筛选-->
<view class="tab-left" bindtap="tabFun">
  <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}} j" id="tab-hd01" data-id="0">
    综合
  </view>
  <!--需复制替换-->
  <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}} j" id="tab-hd02" data-id="1" data-p="{{p}}" >销量
  <!-- 向上的三角形 -->
  <view class="triangle-up {{tabArr.ab=='4'? 'san' : ''}}"></view>
  <!--三角形下-->
  <view class="triangle-down {{tabArr.ab=='5'? 'sa' : ''}}"></view>
  <!--三角形下-->
  </view>
  <!--需复制替换-->
  <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}} j" id="tab-hd01" data-id="2" data-t="{{t}}">价格   
  <!-- 向上的三角形 -->
  <view class="triangle-up {{tabArr.agg=='4'? 'san' : ''}}"></view>
  <!--三角形下-->
  <view class="triangle-down {{tabArr.agg=='5'? 'sa' : ''}}"></view>
  <!--三角形下-->
  </view>
  <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}} j" id="tab-hd02" data-id="3">新品</view>
</view>
<!--筛选end-->
<view class="list">
    <block wx:for="{{shopList}}" wx:key="*this" data-id="{{item.id}}">
        <view class="ban">
            <navigator url="../product/detail?productId={{item.id}}" class="cover flex-wrp">
                <image class="banner" src="{{item.photo_x}}" ></image>
          <view class="act-item ellipsis">
              <text class="type">{{item.name}}</text>
            </view>
              <!--<view class="act-item ellipsis" >
                <text class="kkk">{{item.intro}}</text>
            </view>-->
            <view class="act-item ellipsis" >
                <text style="color:red">¥ {{item.price_yh}}</text>
            </view>
              <view class="act-item ellipsis" >
                <text style="color:#999999;font-size:25rpx">已有{{item.shiyong}}人购买</text>
            </view>
            </navigator>
        </view>
        <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
        <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"></view> 
    </block>
    <view class="clear mt10" bindtap="getMore" style="display:{{shopList==''?'none':'block'}}">点击查看更多</view>
</view>

<view style="text-align:center;margin-top:10%;display:{{shopList==''?'block':'none'}}">
    暂无商品,请再逛逛吧^_^！
</view>

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

page {
  height: 100%;
  background: white
}

.list-tab {
  height: 106rpx;
  box-sizing: border-box;
  padding: 5px 10px;
}

.list-tab ul {
  display: flex;
  height: 72rpx;
  border: 1px solid #b6aaec;
  border-radius: 12rpx;
}

.list-tab li {
  flex: 1;
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  color: #b6aaec;
}

.list-tab .active {
  background: #b6aaec;
  color: #fff;
}

/*list-box*/

.list-view {
  border-top: 1px solid #ccc;
}

.list-box {
  display: flex;
  padding: 5px 10px;
  border-bottom: 1px solid #aaa;
}

.list-images image {
  width: 170rpx;
  height: 170rpx;
}

.list-text {
  font-size: 14px;
  color: #666;
  flex: 1;
  background-size: 60rpx;
}

.list-text .name {
  display: block;
  height: 80rpx;
  padding: 5px;
}

.list-text .txt {
  padding: 5px;
  color: #aaa;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.list-text .price {
  font-size: 18px;
  color: red;
}

.swiper-box {
  height: 100%;
}

.scroll-box {
  height: 100%;
}

.addcart {
  display: flex;
  justify-content: center;
  align-items: center;
}

.addcart image {
  width: 80rpx;
  height: 80rpx;
}
.list{
  background: #fff;
  width: 100%;
}
.ban{
  width: 46%;
  padding: 10rpx ;
  border: 2rpx solid #ccc;
  display: inline-block;
  margin-left:4rpx ;
}
.ban image{
  width: 347rpx;
  height:  347rpx;
}
.type{
  font-size:30rpx;
  font-weight: 700;
  margin-left: 10rpx;
}
 .kkk{
    font-size:28rpx;
  /*font-weight: 700;*/
  margin-left: 10rpx;
}



.commodity_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.2;
 overflow: hidden;
 z-index: 1000;
 color: #fff;
}
.commodity_attr_box {
 width: 100%;
 overflow: hidden;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 2000;
 background: #fff;
 padding-top: 20rpx;
}
.mt10{
  margin: 0 auto;
  text-align: center;
  height: 70rpx;
  width: 450rpx;
  line-height: 70rpx;
  border-radius:10rpx; 
  border: 1px solid #999;
  font-size: 30rpx;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}

/*筛选*/
.tab-left {
  width: 100%;
  line-height: 160%;
  font-size: 32rpx;
  border-right: solid 1px gray;
}

.tab-left .j {
  text-align: center;
  display: inline-block;
  width: 25%;
  padding: 20rpx 0;
}

.tab-left .active {
  color: #f00;
  border-bottom: solid 5rpx red;
}
/*上三角*/
.triangle-up {
width:0;
height:0;   
border-left:8rpx solid transparent;   
border-right:8rpx solid transparent;   
border-bottom:8rpx solid #000;display:inline-block;
float: right;
position: absolute;
top: 36rpx;
margin-left: 10rpx;
}
 .j .san{
border-left:8rpx solid transparent;   
border-right:8rpx solid transparent;   
border-bottom:8rpx solid #f00;
   }
/*下三角*/

.triangle-down {
    width: 0;
    height: 0;
    border-left: 8rpx solid transparent;
    border-right: 8rpx solid transparent;
    border-top: 8rpx solid #000;         display:inline-block;
    position: absolute;
    top: 50rpx;margin-left: 10rpx;

}
.j .sa{
  border-left: 8rpx solid transparent;
  border-right: 8rpx solid transparent;
  border-top: 8rpx solid red;   
}
/*筛选end*/

三、js页面代码如下：

var app = getApp()
Page({
  data: {
    current: 0,
    shopList: [],
    page:2,
    // 切换
    tabArr: {
      curHdIndex: 0,
      curBdIndex: 0,
      ab: 0,
      agg: 0
    },
    p: 0,//销量
    t: 0,//折扣
    condition:"zonghe",
    sort:"desc"
  },
  // tab切换
  tabFun: function (e) {
    //获取触发事件组件的dataset属性
    var that=this; 
    var _datasetId = e.target.dataset.id;
    var _datasetp = e.target.dataset.p;
    var _datasett = e.target.dataset.t;
    var _obj = {};
    _obj.curHdIndex = _datasetId;
    _obj.curBdIndex = _datasetId;
    //  第一个没排序
    if (_datasetId == 0) {
      _obj.ab = 0;
      _obj.agg = 0;
      that.setData({
        condition: 'zonghe',
        sort: 'desc',
        tabArr: _obj,
        p: 0,
        t: 0,
      });
    }
    //  第二个
    if (_datasetId == 1 && _datasetp == 0) {
      _obj.agg = 0;
      _obj.ab = 4;
      that.setData({
        tabArr: _obj,
        p: 5,
        t: 0,
        condition: 'sell',
        sort: 'asc'
      });
    
    }
    if (_datasetId == 1 && _datasetp == 5){
      _obj.agg = 0;
      _obj.ab = 5;
      that.setData({
        tabArr: _obj,
        p: 0,
        condition: 'sell',
        sort: 'desc'
      });
    }
    //  第三个
    if (_datasetId == 2 && _datasett == 0) {
      _obj.ab = 0;
      _obj.agg = 4;
      that.setData({
        tabArr: _obj,
        t: 5,
        condition: 'price',
        sort: 'asc'
      });
    } 
    if (_datasetId == 2 && _datasett == 5) {
      _obj.ab = 0;
      _obj.agg = 5;
      that.setData({
        tabArr: _obj,
        t: 0,
        condition: 'price',
        sort: 'desc'
      });
    }
    //  第4个没排序
    if (_datasetId == 3) {
      _obj.ab = 0;
      _obj.agg = 0;
      that.setData({
        tabArr: _obj,
        p: 0,
        t: 0,
        condition: 'new',
        sort: 'desc'
      });
    }    
    console.log("----id:" + _datasetId + "----");
    console.log("----sell:" + _datasetp + "=>" + that.data.p +"----");
    console.log("----price:" + _datasett + "=>" + that.data.t +"----");
    console.log("----tabarr:" + that.data.tabArr.curHdIndex + "----");
    console.log("----condition:" + that.data.condition + "=>sort:" + that.data.sort + "----");
    that.shaixuan();
  },
  showModal: function () {
  // 显示遮罩层
  var animation = wx.createAnimation({
   duration: 200,
   timingFunction: "linear",
   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), 200)
 },
 hideModal: function () {
  // 隐藏遮罩层
  var animation = wx.createAnimation({
   duration: 200,
   timingFunction: "linear",
   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), 200)
 },
  onPullDownRefresh: function () {
    console.log('onPullDownRefresh')
  },
  onLoad: function (options) {
  var objectId = options.title;
  console.log(objectId)
 wx.setNavigationBarTitle(
    {
      title: objectId,
      success: function() {
        console.log('setNavigationBarTitle success')
      },
    })
    return false
},
onLoad: function (options) {
    //页面初始化 options为页面跳转所带来的参数
    //var groupId = wx.getStorageSync('groupId')
    var brand_id = options.brand_id;
    var cat_id = options.cat_id;
    var ptype = options.ptype;
    var that = this;
    // 筛选条件
    var condition = that.data.condition;
    var sort = that.data.sort;
    that.setData({
       condition: condition,
       sort: sort,
       op_brand_id:brand_id,
       op_cat_id:cat_id,
       op_ptype:ptype,
    });
    //ajax请求数据
    wx.request({
      url: app.d.ceshiUrl + '/Api/Product/lists',
      method:'post',
      data: {
        brand_id:brand_id,
        cat_id:cat_id,
        ptype:ptype
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var shoplist = res.data.pro;
        that.setData({
          shopList: shoplist
        })
      },
      error: function(e){
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    })
  },
  //详情页跳转
  lookdetail: function (e) {
    console.log(e)
    var lookid = e.currentTarget.dataset;
    console.log(e.currentTarget.dataset);
    wx.navigateTo({
      url: "../index/detail?id=" + lookid.id
    })
  },
  switchSlider: function (e) {
    this.setData({
      current: e.target.dataset.index
    })
  },
  changeSlider: function (e) {
    this.setData({
      current: e.detail.current
    })
  },
  shaixuan:function (e){
    var that=this;
    // 筛选条件
    var condition=that.data.condition;
    var sort=that.data.sort;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Product/lists',
      method: 'post',
      data: {
        condition:condition,
        sort:sort,
        brand_id: that.data.op_brand_id,
        cat_id: that.data.op_cat_id,
        ptype: that.data.op_ptype
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var prolist = res.data.pro;
        if (prolist == '') {
          wx.showToast({
            title: '没有更多数据！',
            duration: 2000
          });
          return false;
        }
        //that.initProductData(data);
        that.setData({
          shopList: prolist
        });
        //endInitData
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    })  
  },
  //点击加载更多
  getMore: function (e) {
    var that = this;
    var page = that.data.page;
    // 筛选条件
    var condition = that.data.condition;
    var sort = that.data.sort;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Product/getlist',
      method: 'post',
      data: { 
        page: page,
        condition: condition,
        sort: sort,
        brand_id: that.data.op_brand_id,
        cat_id: that.data.op_cat_id,
        ptype: that.data.op_ptype
       },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        var prolist = res.data.pro;
        if (prolist == '') {
          wx.showToast({
            title: '没有更多数据！',
            duration: 2000
          });
          return false;
        }
        //that.initProductData(data);
        that.setData({
          page: page + 1,
          shopList: that.data.shopList.concat(prolist)
        });
        //endInitData
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 2000
        });
      }
    })
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }

})

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