微信小程序滑动显示/隐藏状态栏-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序滑动显示/隐藏状态栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我们在开发应用的时候经常会遇到各种需求，比如有时候我们想要实现这种效果，想要让顶部的导航栏跟随页面的滑动实现隐藏和显示，这个时候就需要发动我们的小脑筋想一下要如何实现了

微信小程序navigationbar隐藏,微信小程序,微信小程序,小程序

在实现功能之前，首先我们要明白功能的实现方式以及原理。

简单来看就是两个步骤：

1、导航栏的显示和隐藏（可以通过页面的json文件设置）

2、监听屏幕滑动去控制显示和隐藏属性值的变化

一、导航栏设置

不过大家都知道导航栏的颜色可以在 app.json 中的 window 属性里面添加 navigationBarBackgroundColor 属性，但是里面的颜色只能为纯色，不能使用 rgb 颜色，或者 rgba 的色号。

使用原生的导航栏无法实现我们想要的渐隐的效果

那么就需要我们自定义导航栏（下面是我自己定义的导航栏）

【精选】微信小程序自定义navigationBar、自定义标题栏_navigation-bar-CSDN博客

使用自定义的导航栏就方便很多，可以实现各种操作

二、屏幕滑动监控

搞定了导航栏，加下来该想如何可以获取屏幕的滑动操作，微信小程序提供了页面生命周期函数onPageScroll，具体api使用方式可以参考官方文档

既然工具都有了那就可以对他进行操作是实现功能了

1、去掉原生导航栏

json:

{
  "navigationStyle":"custom",
}

如果想要某一个页面实现导航栏隐藏，只需要在这个页面设置 "navigationStyle":"custom" 就可以了。

2、监听屏幕的滑动

wxml:

<navigationBar leftButton="{{false}}" title="首页" titlePosition="left" bgcolor="{{navigationBarColor}}" opacity="{{opacity}}"></navigationBar>

wxml中非常简单，你只需要按照普通组件引入的方式引入导航栏组件就可以 ,自己自定义导航栏直接在导航栏组件中加入opacity属性控制整个组件的透明度，父组件传值就可以，没有可以从上边的链接获取

js:

//监听屏幕滚动，获取滚动距离
onPageScroll: function (e) {
    let that = this
    var opacity, show, scrollTop = e.scrollTop
//根据我们要的滚动距离设置渐隐渐显
//滚动小于115时不显示，当大于115小于200时显示并根据距离调节透明度opacity
//为了渐隐渐显平滑使用距离进行计算
    if (scrollTop <= 115) {
      show = false
    } else if (scrollTop <= 200) {
      show = true
      opacity = (scrollTop - 115) / 100
    } else {
      opacity = 1
    }
    that.setData({
      opacity: opacity,
      show: show
    })

  }

获取距离后根据我们要的滚动距离设置渐隐渐显

滚动小于115时不显示，当大于115小于200时显示并根据距离调节透明度opacity
为了渐隐渐显平滑使用距离进行计算（opacity的值范围0-1，在计算的时候要注意，我是将导航栏显开始显示也就是滑动距离115作为0，滑动距离200作为1计算的）

到此就可以实现导航栏根据屏幕滑动渐隐渐显了

三、父子组件获取用户滑动

如果你要实现该功能的页面是一个子组件，那么很抱歉上述的方法实现不了，在子组件中无法获取到用户滑动屏幕的操作，那么我们就要想别的解决方法了

我想到的解决办法是父组件监听滑动操作调用子组件方法，子组件去获取节点对象方法查询顶部第一个节点的位置信息

代码如下

父组件wxml引入子组件:

<basics id="basics"></basics>

父组件js监听滚动调用子组件方法：

    /**
     * 用户上滑屏幕
     */
    onPageScroll: function (e) {
        var aaa = this.selectComponent("#basics");
        aaa.aaa()
    }

子组件wxml给组顶部第一个元素一个id

 <view id="dataView" class="data-view">

子组件js被调用方法中获取该元素的节点信息并实现滑动渐隐渐显状态栏

//页面滑动
    aaa() {
      let that = this
      const query = wx.createSelectorQuery()

      query.selectViewport().scrollOffset(function (res) {
        var scrollTop = res.scrollTop // 显示区域的竖直滚动位置
        var opacity
        if (scrollTop <= 100) {
          opacity = scrollTop / 100
        } else {
          opacity = 1
        }
        that.setData({
          opacity: opacity
        })

      })
      query.exec()
    },

就这样你就实现了现在在各大app上看到的高级的导航栏渐隐渐显效果。

四、完结

在实现了这个功能之后，这种方法后续有用到了其他的地方，比如类似京东的搜索栏位置滑动、标题的停靠等等

与其说这是一个功能不如说是一类功能的一种解决方法，还有其他的用法大家可以自由发挥文章来源地址https://www.toymoban.com/news/detail-755189.html

到了这里，关于微信小程序滑动显示/隐藏状态栏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！