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

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

文章图片

【微信小程序实现下拉筛选功能】这是主要功能实现，我把它封装成了组件，在对应的地方使用，就可以实现贝壳找房相同的效果

文章图片

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

{{item.text}}

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 = https://www.it610.com/article/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.之后再把当前点击的按钮的状态改为truetabTxt[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,})}, })

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