微信小程序?qū)崿F(xiàn)下拉篩選功能
更新時(shí)間：2022年05月22日 07:14:38 作者：縫隙里看你
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近開(kāi)發(fā)應(yīng)項(xiàng)目需求實(shí)現(xiàn)一個(gè)類(lèi)似與貝殼找房里面的下拉篩選功能，在這里分享給有同樣需求的大家，互相學(xué)習(xí)學(xué)習(xí)
這是主要功能實(shí)現(xiàn)，我把它封裝成了組件，在對(duì)應(yīng)的地方使用，就可以實(shí)現(xiàn)貝殼找房相同的效果
好了，廢話(huà)不多說(shuō)，直接上代碼吧
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>
<!--條件選項(xiàng)欄-->
<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;
}
/* 篩選內(nèi)容 */
.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:
// 引入數(shù)據(jù)
const tabTxtArr = require('../../utils/filtrate.js');
Page({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? tabTxt: [],
? ? searchParam: [],
? },
? //切換導(dǎo)航按鈕
? 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
? ? })
? },
? // 點(diǎn)擊導(dǎo)航按鈕的條件
? 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.在改變某個(gè)子按鈕之前先把該子按鈕組的所有選中狀態(tài)selected改成false，
? ? tabTxt[index1].child[index2].childType.forEach(e =>{
? ? ? e.selected = false
? ? })
? ? //2.之后再把當(dāng)前點(diǎn)擊的按鈕的狀態(tài)改為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; ?//關(guān)閉抽屜
? ? ? e1.child.forEach(e2 => {
? ? ? ? // console.log(e2)
? ? ? ? e2.childType.forEach(e3 => {
? ? ? ? ? // console.log(e3)
? ? ? ? ? if(e3.selected){
? ? ? ? ? ? //選中的加載在一個(gè)數(shù)組中
? ? ? ? ? ? selectedTextArr.push(e3.text)
? ? ? ? ? }
? ? ? ? })
? ? ? })
? ? })
? ? this.setData({
? ? ? tabTxt:tabTxt
? ? })
? ? console.log(selectedTextArr)
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function (options) {
? ? let that = this;
? ? that.setData({
? ? ? tabTxt: tabTxtArr.tabTxt,
? ? })
? },
?})以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)使用POST方式發(fā)送請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)使用POST方式發(fā)送請(qǐng)求，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
JavaScript基礎(chǔ)篇（3)之Object、Function等引用類(lèi)型
這篇文章主要介紹了JavaScript基礎(chǔ)篇（3)之Object、Function等引用類(lèi)型的相關(guān)資料,需要的朋友可以參考下2015-11-11
js bind 函數(shù) 使用閉包保存執(zhí)行上下文
在javascript中，函數(shù)總是在一個(gè)特殊的上下文執(zhí)行（稱(chēng)為執(zhí)行上下文），如果你將一個(gè)對(duì)象的函數(shù)賦值給另外一個(gè)變量的話(huà)，這個(gè)函數(shù)的執(zhí)行上下文就變?yōu)檫@個(gè)變量的上下文了。下面的一個(gè)例子能很好的說(shuō)明這個(gè)問(wèn)題2011-12-12
JS實(shí)現(xiàn)固定在右下角可展開(kāi)收縮DIV層的方法
這篇文章主要介紹了JS實(shí)現(xiàn)固定在右下角可展開(kāi)收縮DIV層的方法,右下角的div層可實(shí)現(xiàn)收縮與展開(kāi)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
javascript實(shí)現(xiàn)可全選、反選及刪除表格的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)可全選、反選及刪除表格的方法,實(shí)例展示了javascript針對(duì)表格全選、反選、刪除、隔行變色、刪除提示等常用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
echarts 移動(dòng)端豎著顯示效果實(shí)現(xiàn)
這篇文章主要為大家介紹了echarts 移動(dòng)端豎著顯示效果實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
各種頁(yè)面定時(shí)跳轉(zhuǎn)(倒計(jì)時(shí)跳轉(zhuǎn))代碼總結(jié)
下面對(duì)實(shí)現(xiàn)頁(yè)面定時(shí)跳轉(zhuǎn)（也稱(chēng)倒計(jì)時(shí)跳轉(zhuǎn)）做一下總結(jié)，以備不時(shí)之需，經(jīng)常使用的朋友可以參考下2013-10-10
這篇文章主要為大家介紹了javascript防抖節(jié)流函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
這篇文章主要介紹了JavaScript中捕獲與阻止捕獲、冒泡與阻止冒泡詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
javascript實(shí)現(xiàn)粘貼qq截圖功能（clipboardData）
這篇文章主要介紹了javascript實(shí)現(xiàn)粘貼qq截圖功能，利用clipboardData在網(wǎng)頁(yè)中實(shí)現(xiàn)截屏粘貼的功能，感興趣的小伙伴們可以參考一下2016-05-05