微信小程序滑动显示/隐藏状态栏

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

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

微信小程序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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包