短视频直播源码,实现顶部导航栏背景图片渐隐渐现效果

短视频直播源码,实现顶部导航栏背景图片渐隐渐现效果

具体代码

案例中用到了uview这个ui框架的u-navbar组件,具体可去官网查看这个组件的可配置API

 

1
<br><template><br>  <view><br>    <u-navbar <br>      v-show="isNavbar"<br>      :background='backgroundObj'<br>      :is-fixed='true'<br>      :is-back='false'<br>      :border-bottom='false'<br>    /><br>  </view><br></template><br><script><br>export default {<br>  data() {<br>    return {<br>      isNavbar: false, //自定义导航栏是否显示<br>      backgroundObj: {<br>        backgroundImage: 'url(/static/zeroPurchase/titleBg.png)',<br>        backgroundSize: '100% 100%',<br>        opacity: 1<br>    },<br>    }<br>  },<br>  methods: {<br>  onPageScroll(e) {<br>    //获取距离顶部距离<br>    const scrollTop = e.scrollTop;<br>    // 导航条颜色透明渐变<br>    if (scrollTop <= 50) {<br>      this.isNavbar = false<br>    } else {<br>      if( 50 < scrollTop <= 200 ){<br>        this.backgroundObj.opacity = scrollTop / 200<br>      }else{<br>        this.backgroundObj.opacity = 1<br>      }<br>       this.isNavbar = true<br>    }<br>}<br>}<br></script><br><style scoped><br></style>

另外这里用到了onPageScroll监听页面滚动的距离,他接收一个参数对象,我们才可以通过他获取页面距离做一些操作。

以上就是 短视频直播源码,实现顶部导航栏背景图片渐隐渐现效果,更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(181)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示