首页 > 小程序教程 > 微信小程序选择分类顺序下拉框样式设计制作开发教程

微信小程序选择分类顺序下拉框样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序选择分类顺序下拉框样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:

					
<view class="sort-container">
<view class="nav">
<ul class="choose">
<li class="{{activeHidden?'active':''}}" bindtap="changeShow" data-index="1" >选择分类</li>
<li class="{{!activeHidden?'active':''}}" bindtap="changeShow" data-index="2">选择排序</li>
</ul>
<ul class="fenlei" wx:if="{{fenleiHidden}}">
<li bindtap="switchSort" wx:for="{{listMenu}}" wx:for-item="item" data-index="{{index+1}}">{{item}}</li>
</ul>
<ul class="paixu" wx:if="{{paixuHidden}}">
<li bindtap="switchPaixu" data-index="0">销量(高到低)</li>
<li bindtap="switchPaixu" data-index="1">销量(低到高)</li>
<li bindtap="switchPaixu" data-index="2">价格(高到低)</li>
<li bindtap="switchPaixu" data-index="3">价格(低到高)</li>
</ul>
</view>
<scroll-view class="section" scroll-y="{{true}}">
<ul>
<navigator class="goodLi" url="/pages/detail/detail?goodId={{item.ProductId}}" wx:for="{{listGood}}" wx:for-item="item">
<li>
<div class="goodLeft">
<image src="{{item.ProductImage}}" mode="aspectFit"></image>
</div>
<div class="goodRight">
<p class="goodName">{{item.ProductName}}</p>
<p class="goodPrice">
<span class="nowPrice">{{item.ProductSalePrice}}</span>
<del>市场价:¥<span class="oldPrice">{{item.ProductMarketPrice}}</span></del>
</p>
<p class="pingjia">评价 {{item.ProductComment}}</p>
</div>
</li>
</navigator>
</ul>
</scroll-view>
</view>
 
二、wxss样式文件代码如下:
.sort-container {
  height: 100%;
  display: flex;
  flex-direction: column; }
  .sort-container .nav {
    width: 100%;
    height: 43px;
    background-color: #fff;
    border-bottom: 1px solid #c6c7c9;
    position: relative; }
    .sort-container .nav .choose {
      width: 100%;
      display: flex;
      flex-direction: row; }
      .sort-container .nav .choose li {
        flex: 1;
        height: 40px;
        text-align: center;
        color: #999;
        font-size: 12px;
        line-height: 40px; }
        .sort-container .nav .choose li.active {
          color: #e65512;
          border-bottom: 3px #E65512 solid; }
    .sort-container .nav .fenlei, .sort-container .nav .paixu {
      z-index: 999;
      width: 100%;
      position: absolute;
      top: 43px;
      left: 0;
      color: #4e4e4e;
      text-align: center;
      display: flex;
      flex-direction: column; }
      .sort-container .nav .fenlei li, .sort-container .nav .paixu li {
        flex: 1;
        background-color: #ddd;
        width: 100%;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        padding-bottom: 3px;
        padding-top: 3px;
        font-size: 12px;
        border-bottom: 1px solid #000; }
  .sort-container .section {
    width: 100%;
    height: 100%;
    background-color: #fff;
    flex: 1; }
    .sort-container .section ul {
      width: 100%;
      display: flex;
      flex-direction: column; }
      .sort-container .section ul .goodLi {
        width: 100%;
        margin-top: 12px;
        color: #999;
        padding: 3px 5px;
        background-color: #f5f5f5; }
        .sort-container .section ul .goodLi li {
          display: flex; }
        .sort-container .section ul .goodLi div.goodLeft {
          flex: 1;
          margin: 3px 0; }
          .sort-container .section ul .goodLi div.goodLeft image {
            width: 100%;
            height: 80px; }
        .sort-container .section ul .goodLi div.goodRight {
          flex: 3;
          padding: 6px;
          color: #000; }
          .sort-container .section ul .goodLi div.goodRight p.goodName {
            font-size: 10px;
            display: block; }
          .sort-container .section ul .goodLi div.goodRight p.goodPrice {
            padding: 3px 0;
            font-size: 12px;
            color: #cd0606;
            display: block; }
            .sort-container .section ul .goodLi div.goodRight p.goodPrice span.nowPrice {
              font-size: 140%;
              font-weight: bold; }
            .sort-container .section ul .goodLi div.goodRight p.goodPrice del {
              padding-left: 3px;
              text-decoration: line-through; }
          .sort-container .section ul .goodLi div.goodRight p.pingjia {
            display: block;
            font-size: 10px;
            color: #999;
            text-align: right; }
三、js页面代码如下:
Page({
  data: {
    list:[],
    listGood:[],
    listMenu:[],
    fenleiHidden:false,
    paixuHidden:false,
    activeHidden:true,
    title:""
  },
  onLoad: function (options) {
    var sortId=options.sortId;
    var that=this;
    wx.request({
      url: 'http://localhost:81/mock/sort'+sortId+'.json',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        that.setData({
          list: res.data,
          listGood:res.data
        });
      },
      fail: function (error) {
        console.log(error);
      }
    });
    wx.request({
      url: 'http://localhost:81/mock/sortMenu.json',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        that.setData({
          listMenu: res.data[sortId-1].sonMenu,
          title:res.data[sortId-1].name
        });
      },
      fail: function (error) {
        console.log(error);
      }
    });
  },
  onReady:function(){
    wx.setNavigationBarTitle({
      title:this.data.title
    })
  },
  switchPaixu:function(event){
    var index=event.target.dataset.index;
      switch (index) {
        case "0":
          this.data.listGood.sort(function(a,b){
            if(parseInt(a.ProductSaleCount)<parseInt(b.ProductSaleCount)){
              return 1;
            }else{
              return -1;
            }
          });
          break;
        case "1":
          this.data.listGood.sort(function(a,b){
            if(parseInt(a.ProductSaleCount)>parseInt(b.ProductSaleCount)){
              return 1;
            }else{
              return -1;
            }
          });
          break;
        case "2":
          this.data.listGood.sort(function(a,b){
            if(parseInt(a.ProductSalePrice)<parseInt(b.ProductSalePrice)){
              return 1;
            }else{
              return -1;
            }
          });
          break;
        case "3":
          this.data.listGood.sort(function(a,b){
            if(parseInt(a.ProductSalePrice)>parseInt(b.ProductSalePrice)){
              return 1;
            }else{
              return -1;
            }
          });
          break;
      }
    this.setData({
      listGood: this.data.listGood,
      fenleiHidden:false,
      paixuHidden:false
    });
  },
  switchSort:function(event){
    var index=event.target.dataset.index;
    var arr=[];
    for(var i=0;i<this.data.list.length;i++){
      if(parseInt(this.data.list[i].ProductId.substring(3,4))==index){
        arr.push(this.data.list[i]);
      }
    }
    this.setData({
      listGood: arr,
      fenleiHidden:false,
      paixuHidden:false
    })
  },
  changeShow:function(event){
    var index=event.target.dataset.index;
    var that=this;
    console.log(index);
    switch(index){
      case "1":
        this.setData({
          fenleiHidden:!(that.data.fenleiHidden),
          paixuHidden:false,
          activeHidden:true
        })
        break;
      case "2":
        this.setData({
          fenleiHidden:false,
          paixuHidden:!(that.data.paixuHidden),
          activeHidden:false
        })
        break;
    }
  }

});

 

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 56,705次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-04
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
响应式 单页式简历模板 html5 自适应 微信公众平台 Bootstrap 微信文章 企业网站 表格式简历模板 微信模板
您可能会喜欢的其他模板