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

最新推荐文章于 2024-09-25 16:11:03 发布

张美丽呀

最新推荐文章于 2024-09-25 16:11:03 发布

阅读量4.6k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序前端

本文链接：https://blog.csdn.net/slient033/article/details/127701088

版权

本文介绍了微信小程序中实现页面筛选栏的固定定位方法，涉及顶部状态栏、筛选栏布局以及点击事件触发的picker和侧边导航。在使用Vant TreeSelect组件时，遇到多选模式下相同ID元素被错误选中的问题，解决方案是通过在后端数据中添加唯一标识，确保不同类型的筛选互不影响。

摘要由CSDN通过智能技术生成

布局思路：

        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>

最低0.47元/天解锁文章