微信小程序页面-筛选栏固定定位,以及使用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>

    &l
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值