微信小程序下拉筛选菜单

最新推荐文章于 2024-08-23 11:16:55 发布

娜娜�^ _ ^

最新推荐文章于 2024-08-23 11:16:55 发布

阅读量7.1k

点赞数 8

分类专栏：微信小程序文章标签：微信小程序下拉菜单筛选菜单

本文链接：https://blog.csdn.net/Kayla_/article/details/97670086

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

微信小程序下拉筛选菜单

最近在做一个社交商城的微信小程序项目，碰到下拉筛选菜单，按自己的想法写了一个，写的不好忘各位大佬指教，哈哈~
ps:因为后端还没有数据所以筛选功能还没做，但是基本功能实现后做筛选也很简单啦~
wxml:

<view wx:if="{{!searchResult}}">
  <view class='screen'>
    <view class='screen-name {{screenColor?"screen-color":""}}' bindtap='screenShow'>
      <text>{{screen}}</text>
      <text class='iconfont iconsanjiaoxing1 {{screenFlag?"iconfontAnimation":""}}'></text>
    </view>
    <view class='screen-name' style='color:{{salesColor}}' bindtap='salesNumber'>销量</view>
    <view class='screen-name {{brandColor?"screen-color":""}}' bindtap='brandShow'>
      <text>{{filter.abbreviationSix(brandText)}}</text>
      <text class='iconfont iconsanjiaoxing1 {{brandFlag?"iconfontAnimation":""}}'></text>
    </view>
  </view>
  <!-- 点击综合按钮后展示的下拉框 -->
  <!-- 下拉框透明背景 -->
  <view class='drop-down-background' hidden='{{!screenFlag}}' bindtouchstart='handletouchtart'></view>
  <view class='drop-down-flex'>
    <view wx:for="{{screenDown.screenDown}}" wx:key="this" class='drop-down {{screenDown.screen==index?"down-active":""}} {{screenFlag?"down-show":""}}' data-item='{{item}}' data-index='{{index}}' bindtap='screenChoice'>
      <text>{{item}}</text>
      <text class='iconfont iconbianzu5' wx:if='{{screenDown.screen==index?true:false}}'></text>
    </view>
  </view>
   <!-- 点击品牌按钮后展示的下拉框 -->
  <!-- 下拉框透明背景 -->
  <view class='drop-down-background' hidden='{{!brandFlag}}' bindtouchstart='handletouchtart'></view>
  <scroll-view scroll-y class='drop-down-flex'>
    <radio-group class="brand" bindchange="radioChange">
      <view wx:for="{{brandDown}}" wx:key="this" class='brand-down {{brandFlag?"brand-show":""}}' data-item='{{item.value}}' data-index='{{index}}'>
        <label  class='radio'>
          <radio color="#F46458" value="{{item.name}}" checked="{{item.checked}}"/>
          <text>{{filter.abbreviationEight(item.value)}}</text>
        </label >
      </view>
    </radio-group>
  </scroll-view>
</view>

wxss:

.screen{
  position: fixed;
  top: 88rpx;
  left: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.screen>.screen-name{
  flex: 1;
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  line-height: 100rpx;
}
.screen>.screen-name>.iconfont{
  font-size: 12rpx;
  margin-left: 8rpx;
}

.drop-down-background{
  position: fixed;
  top: 188rpx;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
.drop-down-flex{
  position: fixed;
  top: 188rpx;
  left: 0;
  width: 100%;
  z-index: 222;
  max-height: 100%;
  overflow: hidden;
}
.drop-down{
  width: 100%;
  padding: 0 24rpx;
  background: #fff;
  height: 0rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #666;
  transition: all 300ms;
  overflow: hidden;
}
.down-active{
  color: #F46458;
}
.down-show{
  height: 88rpx;
}
.iconfontAnimation{
  transform: rotate(180deg);
  transition: all 300ms;
}
.screen-color>text{
  color: #F46458;
}

/* 品牌下拉 */
.brand{
  width: 100%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.brand-down{
  width: 50%;
  padding-left: 24rpx;
  height: 0rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #666;
  transition: height 300ms;
  overflow: hidden;
}
.radio{
  display: flex;
  align-items: center;
  width: 100%;
}
.brand-down>.radio>radio{
  margin-right: 24rpx;
}
.radio:nth-child(odd){
  border-right: 2rpx solid rgba(0, 0, 0, 0.1);
}
.brand-show{
  height: 100rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    searchResult:false,
    screen:"综合",
    screenDown: { screenDown:["综合","价格升序","价格降序"],screen:0},
    screenFlag:false,//控制综合下拉框是否显示
    screenColor: false,
    brandFlag:false,
    brandDown: [
      { name: '火星人', value: '火星人' },
      { name: '美达', value: '美达', checked: 'true' },
      { name: 'DFSD', value: 'DFSD' },
      { name: 'WANGJIAL', value: 'WANGJIAL' },
      { name: '东方', value: '东方' },
      { name: '火星人（marssenna）', value: '火星人（marssenna）' },
      { name: '大学新村', value: '大学新村' },
      { name: '大学新村', value: '大学新村' },
      { name: '大学新村', value: '大学新村' },
      { name: '大学新村大学新村大学新村大学新村', value: '大学新村大学新村大学新村大学新村' },
    ],
    brand:0,
    brandColor: false,//控制品牌下拉框是否显示
    brandText:"品牌",
    salesColor:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  screenShow: function () {//综合下拉
    if (this.data.screenFlag){
      this.setData({
        screenFlag : !this.data.screenFlag,
        brandFlag: false,
      })
    }else{
      this.setData({
        screenFlag: !this.data.screenFlag,
        brandFlag: false,
      })
    }
  },
  screenChoice:function(e){//综合下拉选择子项
    console.log(e)
    this.setData({
      screen: e.currentTarget.dataset.item,
      "screenDown.screen": e.currentTarget.dataset.index,
      screenFlag: false,
      screenColor:true
    })
  },
  handletouchtart: function (event) {//点击透明背景隐藏下拉
    this.setData({
      screenFlag: false,
      brandFlag: false
    })
  },

  brandShow: function () {//品牌下拉
    if (this.data.brandFlag) {
      this.setData({
        brandFlag: !this.data.brandFlag,
        screenFlag: false,
      })
    } else {
      this.setData({
        brandFlag: !this.data.brandFlag,
        screenFlag: false,
      })
    }
  },
  radioChange: function (e) {//品牌选择
    console.log(e)
    this.setData({
      brandText: e.detail.value,
      brandFlag: false,
      brandColor: true
    })
  },
  salesNumber:function(){//销量
    if (this.data.salesColor){
      this.setData({
        salesColor: "",
        screenFlag: false,
        brandFlag: false,
      })
    }else{
      this.setData({
        salesColor: "#F46458",
        screenFlag: false,
        brandFlag: false,
      })
    }
    
  },
 })