8***@qq.com
8***@qq.com
  • 发布:2022-02-16 17:39
  • 更新:2022-02-17 12:08
  • 阅读:354

#插件需求# 小程序导航栏默认无,页面上滑到一定高度导航栏显示出来

分类:uni-app

插件需求# 小程序导航栏默认无,页面上滑到一定高度导航栏显示出来。

请问大佬们,此功能要如何实现?

2022-02-16 17:39 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

利用吸顶效果,设置吸顶组件最小高度1rpx,吸顶内容用v-if隐藏,当触发吸顶的时候用v-if打开导航栏就行了,我这里是用了uView框架的示例代码: <!-- 吸顶线路栏 --> <u-sticky :enable="stickyEnable" @fixed="routeFixed" @unfixed="routeUnfixed" :offset-top="stickyTopRpx"> <!-- 只能有一个根元素 --> <view class="sticky-site ccl-white-bgcolor"> <view v-if="stickyShow" class="u-flex"> <view class="item u-flex-1 u-p-t-16 u-p-b-16 u-p-l-24 u-p-r-24"

class="{'u-border-left': index>0,'blue-col': index == routeIndex}" v-for="(item,index) in routeList" :key="index" @click="routeToggle(index)">
<view class="u-flex u-row-between u-col-bottom">
<view class="u-font-30 ccl-font-bold">{{item.lineOrder}} 线路</view>
<view class="u-font-20">¥{{item.marketPrice}}/人</view>
</view>
<view class="u-font-20 u-line-1">{{item.subName}}</view>
</view>
</view>
</view>
</u-sticky>
<!-- 吸顶线路栏 -->

                //吸顶事件  
    routeFixed() {  
        this.stickyShow = true  
    }
  • 8***@qq.com (作者)

    uView 有这个组件嘛? 在哪里我没找到

    2022-02-17 12:43

  • 8***@qq.com (作者)

    感谢

    2022-02-17 12:45

  • 1***@qq.com

    回复 8***@qq.com: https://v1.uviewui.com/components/sticky.html 你给导航栏设置position: sticky属性也行

    2022-02-17 14:14

该问题目前已经被锁定, 无法添加新回复