uni-重置滚动条顶部

scroll-top:滚动条内部到顶部距离属性

1.对左边每一项分类绑定事件

  <scroll-view scroll-y="true" class="scroll_left" :style="{height:wh+'px'}">
        <block v-for="(item,index) in ClassList" :key="index">
          <view class="item_class" 
           :class="{active:index===active}" 
           @click="handle(index)">{{item.cat_name}}</view>
        </block>
 </scroll-view>

 2.定义属性数据

 data() {
      return {
        scroll_top: 0,//重置滚动条顶部
    },

3.右侧滚动条绑定属性

 <scroll-view scroll-y="true" class="scroll_right" :style="{height:wh+'px'}" :scroll-top="scroll_top">

 4.事件处理

  handle(i) {
        // 处理滚动条重置顶部
        this.scroll_top = this.scroll_top ? 0 : 1
      }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-transition 是一个Vue.js的过渡库,可以用于在应用中添加炫酷的过渡效果。顶部滚动淡出是指当页面向下滚动时,顶部的内容会逐渐淡出消失。 要实现这个效果,我们可以通过uni-transition提供的fade-out过渡效果和滚动事件来实现。 首先,需要在组件的模板中设一个顶部容器,例如: ```html <template> <div class="top-container" :class="{ 'fade-out': isFadeOut }"> <!-- 顶部内容 --> </div> </template> ``` 然后,在组件的脚本中,需要设isFadeOut变量来控制滚动淡出效果的开关,并监听滚动事件: ```javascript <script> export default { data() { return { isFadeOut: false, // 是否触发淡出效果 }; }, mounted() { window.addEventListener('scroll', this.handleScroll); }, beforeUnmount() { window.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 判断页面滚动高度是否超过一定阈值,来触发淡出效果 this.isFadeOut = scrollTop > 100; }, }, }; </script> ``` 最后,在样式中定义.fade-out类的过渡效果: ```css <style scoped> .top-container { transition: opacity 0.5s; // 过渡效果设为0.5秒淡入淡出 } .fade-out { opacity: 0; // 当isFadeOut为true时,将顶部容器的透明度设为0,实现淡出效果 } </style> ``` 通过以上的步骤,当页面向下滚动超过100个像素时,顶部的内容就会逐渐淡出消失,从而实现了顶部滚动淡出的效果。使用uni-transition库,我们可以轻松地给Vue.js应用添加各种炫酷的过渡效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值