微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序筛选组件,微信小程序,微信小程序,前端

布局思路：

        1、顶部是状态栏，接着筛选栏。

        2、点击【选择年份】和【选择月份】，会从底部弹出picker；点击【筛选】，则会出现遮罩层，并显示侧边导航（会议类型筛选项），和按钮。

       3、因筛选项也要固定定位，接在状态栏下面，因此可以用一个div将筛选栏div和状态栏div一起包裹起来。

        4、侧边导航是点击【筛选】后展示的，而且是出现在遮罩层中，因此可以将遮罩层的div与顶部栏同级，侧边导航写在遮罩层里

 <!-- 包裹 状态栏和筛选栏 -->
  <view class="zindex_9999">
    <!-- 状态栏 -->
    <view class="tab_box">
      <view class="tab {{currentTab=='0'? 'active' : ''}}" id="0" bindtap="tab">
        <view>正在进行</view>
      </view>
      <view class="tab {{currentTab=='1'? 'active' : ''}}" id='1' bindtap="tab">
        <view>待开始</view>
      </view>
      <view class="tab {{currentTab=='2'? 'active' : ''}}" id="2" bindtap="tab">
        <view>已结束</view>
      </view>

    </view>

    <!-- 筛选栏 -->
    <view class="filterBox" wx:if="{{showFilter}}">
      <view class="filter">
        <picker class="filterText" bindchange="selectDataTime" value="{{yearIndex}}" id="year" range="{{yearList}}">
          <view class="date"> {{chooseYear||'选择年份'}}</view>
        </picker>
      </view>
      <view class="filter">
        <picker class="filterText" id="month" value="{{monthIndex}}" range="{{monthList}}" bindchange="selectDataTime">
          <view class="date">{{chooseMonth || '选择月份'}}</view>
        </picker>
      </view>
      <view class="filter {{choosefilter=='filter_type'?'active':''}}" id="filter_type" bindtap="choosefilter">
        <view class="filterText ">筛选</view>
        <image class="filterIcon" src="../../../images/filter.png"></image>
      </view>
    </view>
  </view>

相关样式

.zindex_9999{
  z-index: 9999;
  position: fixed;
}

// 状态栏样式
.tab_box {
  left: 0;
  top: 0;
  right: 0;
  height: 88rpx;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.tab {
  height: 88rpx;
  border-bottom: 1rpx solid #F2F5FA;
  line-height: 88rpx;
  flex: 33%;
  text-align: center;
}

// 筛选栏
.filterBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 750rpx;
  padding: 14rpx 30rpx;
  box-sizing: border-box;
  overflow-y: auto;
  background: #FFFFFF;
  z-index: 99999;

    .filter {
      height: 60rpx;
      padding: 10rpx 0rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      /* 子元素横向排列 */
      justify-content: center;
      /* 相对父元素水平居中 */
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      margin-right: 16rpx;
      margin-left: 15rpx;

        .filterText {
            max-width: 200rpx;
            height: 40rpx;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .filterText.checked {
          color: #0C9DF2;
        }
        .filterIcon {
              width: 20rpx;
              height: 20rpx;
              margin-top: 10rpx;
              margin-left: 8rpx;
        }
    }
   &.active {
      color: #0580B4;
     
    }
}

// 遮罩层内容div
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 280rpx;
}

// 改变组件的原本样式--遮罩层
.tree_select .van-tree-select{
  margin-top: -114rpx;
  height:682rpx;
}

.tree_select  .van-tree-select__item {
  position: relative;
  padding: 0 6rpx 0 var(--padding-md,0px);
  font-weight: var(--van-font-weight-bold);
  line-height:var(--tree-select-item-height, 88rpx);
  user-select: none;
  cursor: pointer;
  width: 200rpx;
  display: inline-block;
  margin: 10rpx 0 0 26rpx;
  border-radius: 10px;
  height: 88rpx;
  box-shadow: 0px 0 2rpx 0 rgb(156 175 201);
  background: #f7f7f7;
  box-sizing: border-box;
  text-align: center;
}

.tree_select .van-tree-select__selected{
  right: var(--padding-md, -30rpx); 
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.tree_select .van-tree-select__item--active {
  color: var(--tree-select-item-active-color, #19A2F3);
  background-color:var(--tree-select-nav-background-color, #eaf4fe);
}

// 底部按钮
filterBtns{
  height: 128rpx;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 20rpx 20px 0 20rpx;
  margin-top: 28rpx;
  z-index: 99;
  background-color: #FFFFFF;
}

.filterBtns .btn{
  width: 332rpx;
  height: 86rpx;
  line-height: 86rpx;
  text-align: center;
  border-radius: 24px;
  background: #F7F7F7;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.filterBtns .end{
  background: linear-gradient(321deg, #0C9DF2 0%, #38AFF5 100%);
  color:#fff;
}

筛选功能用到的是vant组件库的treeSelect组件，支持多选模式。然而在使用的时候，虽然是支持多选，但是在选中会议类型下的某个元素，比如id为3（id是后台返回，每组一级类型下的数据都不一样，但是id会一样，且不是唯一的），选择了这个元素后，【作物】和【产品】类型的二级元素下，包含id为3的元素也同样被选中了；在【作物】或【产品】取消选中id为3的元素后，【会议类型】下原本被选中的元素，也被取消了。这就会导致，如果在切换左侧一级类型的时候，如果要进行重置（清空）操作，那么在进行选择完后，用户即使不继续做任何选择，就只是来回切换选项，数据全部会被清空。

因此为了让每个type下，用户的操作不被覆盖，可以在最开始分别请求3个接口的时候，存储数据的时候，给每个id加一个标识。

// 获取会议类型
  async getMeetTypes() {
    let result = await getMeetTypes();
    if ((result.code = 200001)) {
      let data = result.data.map((item) => {
        return {
          id: 'type_'+item.id,   // 给各一级数据里的id加上标识，以免选择互相影响
          text: item.name,
        };
      });
      this.setData({
        "alltype[0].children": data,
        max: result.data.length,
      });
    }
  },

这样子，用户在【会议类型】下选择的元素，在【作物】和【产品】里，同样的id也不会同时被选中。

文章来源地址https://www.toymoban.com/news/detail-545416.html

到了这里，关于微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！