微信小程序实现下拉筛选功能

最近开发应项目需求实现一个类似与贝壳找房里面的下拉筛选功能，在这里分享给有同样需求的大家，互相学习学习

这是主要功能实现，我把它封装成了组件，在对应的地方使用，就可以实现贝壳找房相同的效果

好了，废话不多说，直接上代码吧

wxml:

<!--筛选栏-->
<view class="cxj-contents">
 <view class="cxj-menu">
  <view class="flex-view{{item.active' active':''}}" wx:for="{{tabTxt}}" wx:key="" data-index="{{index}}"
   bindtap="filterTab" wx:key="id">
   <text class="flex_nav {{item.active' active':''}}">{{item.text}}</text>
   <icon class="iconfont {{item.active' iconshanglaxiala-':'iconshanglaxiala-1'}}" />
  </view>
 </view>
</view>

<!--条件选项栏-->
<view class="cxj-tab-layout" hidden="{{!item.active}}" wx:for="{{tabTxt}}"
 wx:for-index="index1" wx:for-item="item" wx:key="id" >
 <scroll-view scroll-y class="scroll" style="height: calc(100vh - {{navH+45}}px);">
  <view class="cxj-tap-wrap">
   <view>
    <view wx:for="{{item.child}}" wx:for-item="item_child" wx:key="id" wx:for-index="index2">
     <view class="title">{{item_child.title}}:</view>
     <view class="cxj-tap-main">
      <view class="navs {{item_childtype.selected==true'active':''}}" wx:for="{{item_child.childType}}"
       wx:for-item="item_childtype" wx:key="id" data-id="{{item_childtype.id}}" data-index="0"
       data-txt="{{item_childtype.text}}" wx:for-index="index3">
       <view bindtap="clickTabChild" data-index1="{{index1}}" data-index2="{{index2}}" data-index3="{{index3}}">{{item_childtype.text}}</view>
      </view>
     </view>
    </view>
   </view>
   <view class="select_btn">
    <button class="clear" bindtap="filterClears">清空条件</button>
    <button class="submit" bindtap="filterSubmit">确定</button>
   </view>
  </view>
  <!-- <view class="hidden" bindtap="closefilterTab"></view> -->
 </scroll-view>
</view>

wxss:

@import "../../style/iconfont.wxss";
/* 筛选栏 */
.cxj-contents{
 position: sticky;
 width: 100%;
 height: 100rpx;
 z-index: 1003;
 /* box-shadow: 0px 15px 15px -15px rgba(200,200,200,0.6); */
 overflow: hidden;
 margin-top: -30rpx;
}
.cxj-menu {
 background-color: #fff;
 width: 100%;
 height: 100%;
 display: flex;
 flex-wrap: nowrap;
 font-size: 32rpx;
}
.cxj-menu .iconshanglaxiala-{
 color: #FF6F00
}
.cxj-menu .iconshanglaxiala-1{
 color: #333
}

.cxj-menu .flex_nav.active {color: #FF6F00;}

.flex-view {
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1;
 overflow: hidden;
 display: block;
 text-align: center;
 line-height: 100rpx;
 }
.flex_nav{
 font-size: 32rpx;
 color: #333
 }
.cxj-icon {
 width: 24rpx;
 height: 24rpx;
 vertical-align: middle;
 margin-left: 5px;
}

/* 筛选内容 */
.cxj-content {
 width: 100%;
 font-size: 28rpx;
 z-index: 1009;
}
.cxj-content-li {
 line-height: 60rpx;
 text-align: center;
}
.cxj-tab-layout {
 width: 100%;
 overflow: hidden;
 z-index: 1009;
 /* height: 100%; */
 /* padding-top: 20rpx; */
 background-color: rgba(000,000,000,.5);
 /* position: fixed; */
}
.hidden{
 background-color: rgba(000,000,000,.5);
 height: 100%;
 z-index: 9999;
 width: 100%;
}
.cxj-tab-layout .navs.active { background: #FFE5D9 !important;}

.cxj-tap-wrap{
 padding: 0 30rpx;
 background: #fff;
 padding-bottom: 40rpx
}
.cxj-tap-main{
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
 box-sizing: border-box;
}
.title{
 margin-bottom: 20rpx
}
.scroll{
/* height: calc(100vh - 110px); */
}
.cxj-tab-layout .navs {
 height: 88rpx;
 line-height: 88rpx;
 text-align: center;
 font-size: 32rpx;
 font-weight: 300;
 background: #F3F3F3;
 border-radius: 6rpx;
 color: #333333;
 margin-bottom: 24rpx;
 flex: 0 0 31%;
}
.cxj-tap-main:after {
  content: "";
  width:31%;
}

/* 按钮 */
.select_btn{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select_btn .clear{
  width: 31%;
  font-size: 30rpx;
  font-weight: 300;
  border: 1px solid #FF8751;
  border-radius: 6rpx;
  background-color: #fff;
  color: #FF8751;
  height: 88rpx;
  line-height: 54rpx;
  margin: 0;
}
.select_btn .submit{
  width: 66%;
  font-size: 30rpx;
  font-weight: 300;
  background-color: #FF8751;
  color: #fff;
  height: 88rpx;
  line-height: 60rpx;
  margin: 0;
}

js:

// 引入数据
const tabTxtArr = require('../../utils/filtrate.js');
Page({
 /**
 * 页面的初始数据
 */
 data: {
  tabTxt: [],
  searchParam: [],
 },

 //切换导航按钮
 filterTab(e) {
  var that = this;
  var data = JSON.parse(JSON.stringify(that.data.tabTxt));
  var index = e.currentTarget.dataset.index;
  var newTabTxt = data.map(function (e) {
   e.active = false;
   return e;
  });
  newTabTxt[index].active = !that.data.tabTxt[index].active;
  this.setData({
   tabTxt: data
  })
 },

 // 点击导航按钮的条件
 clickTabChild(e) {
  // console.log(e.currentTarget.dataset)
  let tabTxt = this.data.tabTxt;
  let index1 = e.currentTarget.dataset.index1;
  let index2 = e.currentTarget.dataset.index2;
  let index3 = e.currentTarget.dataset.index3;
  // console.log(index2)
  // console.log(tabTxt[index1].child[index2].childType[index3].selected);
  //1.在改变某个子按钮之前先把该子按钮组的所有选中状态selected改成false，
  tabTxt[index1].child[index2].childType.forEach(e =>{
   e.selected = false
  })
  //2.之后再把当前点击的按钮的状态改为true
  tabTxt[index1].child[index2].childType[index3].selected = !tabTxt[index1].child[index2].childType[index3].selected;
  this.setData({
   tabTxt: tabTxt
  })
  // console.log(tabTxt)
 },

 // 清空条件
 filterClears(e) {
  var that = this;
  let tabTxt = that.data.tabTxt;
  tabTxt.forEach(e1 => {
   console.log(e1)
   e1.child.forEach(e2 => {
    // console.log(e2)
    e2.childType.forEach(e3 => {
     console.log(e3)
     if(e1.active){
       e3.selected = false
     }
    })
   })
  })
  this.setData({
   tabTxt: tabTxt
  })
 },
 // 确定按钮
 filterSubmit(e) {
  var that = this;
  // console.log(that.data.searchParam);
  let tabTxt = this.data.tabTxt;
  let selectedTextArr = [];
  tabTxt.forEach(e1 => {
   // console.log(e1)
   e1.active = false; //关闭抽屉
   e1.child.forEach(e2 => {
    // console.log(e2)
    e2.childType.forEach(e3 => {
     // console.log(e3)
     if(e3.selected){
      //选中的加载在一个数组中
      selectedTextArr.push(e3.text)
     }
    })
   })
  })
  this.setData({
   tabTxt:tabTxt
  })
  console.log(selectedTextArr)
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
  let that = this;
  that.setData({
   tabTxt: tabTxtArr.tabTxt,
  })
 },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。