美文网首页
uniapp scroll-view 回到顶部

uniapp scroll-view 回到顶部

作者: 我是七月 | 来源:发表于2024-07-08 15:50 被阅读0次

    点击tab切换时,我们希望列表从顶部开始scroll-view 提供了scroll-top属性

    scroll-top设置
    只是设置scroll-top时不好使的,这里需要注意@scroll 方法

    //template
    <scroll-view 
        :scroll-top="scrollTop" 
        scroll-y="true" 
        class="scroll-Y" 
         @scroll="scroll"
     >
         <view>滚动区域</view>     
     </scroll-view>
    
    // script
    
    export default {
        data() {
            return {
                scrollTop: 0,
                oldScrollTop:0
            }
        },
        methods: {
            scroll (e) {
                //记录scroll  位置
                this.oldScrollTop = e.detail.scrollTop
            },
            goTop (e) {
                //视图会发生重新渲染
                this.scrollTop = this.oldScrollTop
                //当视图渲染结束 重新设置为0
                this.$nextTick(() =>{
                    this.scrollTop = 0
                });
                uni.showToast({
                    icon:"none",
                    title:"纵向滚动 scrollTop 值已被修改为 0"
                })
            }
        }
    }
    
    
    
    

    相关文章

      网友评论

          本文标题:uniapp scroll-view 回到顶部

          本文链接:https://www.haomeiwen.com/subject/mnfacjtx.html