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

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

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

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

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,
    })
  },
 })

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

(0)

相关推荐

  • 微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">

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

    最近开发应项目需求实现一个类似与贝壳找房里面的下拉筛选功能,在这里分享给有同样需求的大家,互相学习学习 这是主要功能实现,我把它封装成了组件,在对应的地方使用,就可以实现贝壳找房相同的效果 好了,废话不多说,直接上代码吧 wxml: <!--筛选栏--> <view class="cxj-contents">   <view class="cxj-menu">     <view class="flex-view{

  • 微信小程序实现下拉框功能

    微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q

  • 微信小程序 select 下拉框组件功能

    一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

  • 微信小程序select下拉框实现效果

    小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>¥99.00</text> </view> <!--下拉框 --> <view class='list-msg2' bindtap='bi

  • 微信小程序select下拉框实现源码

    这篇文章主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉,这里为了更清楚的显示小程序层级 就把源码直接复制过来了 <view class='list-msg'> <view class='list-msg1'> <text>商品金额</text> <text>¥99.00<

  • 微信小程序实现下拉菜单切换效果

    本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序实现下拉刷新和轮播图效果

    本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码,供大家参考,具体内容如下 先上图,再解释 wxml页面代码: <scroll-view scroll-y="true" bindscrolltolower="lower" style="height:{{screenH}}px" class="scroll"> <swiper autoplay="{{autoplay}}"

  • 微信小程序iOS下拉白屏晃动问题解决方案

    这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText: "购物车", disableScroll:true } </config> 这样的话页面整个都拉不动了,下面溢

  • 微信小程序实现下拉刷新和上拉分页效果的方法详解

    目录 下拉刷新 上拉分页 下拉刷新 下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页…… 我这里还是用在首页,上拉分页,下拉刷新重载分页.我就是这么做的. 下拉刷新和上拉分页还是有区别的. 下拉刷新需要在index.json中添加属性: "enablePullDownRefresh": true Index.js Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 2

  • 微信小程序实现下拉选项框

    本文实例为大家分享了微信小程序实现下拉选项框的具体代码,供大家参考,具体内容如下 效果图 test.js /**    * 页面的初始数据    */   data: {     shows: false, //控制下拉列表的显示隐藏,false隐藏.true显示     selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据     indexs: 0, //选择的下拉列 表下标,   },   // 点击下拉显示框   selectTaps()

随机推荐