m***@qq.com
m***@qq.com
  • 发布:2019-11-02 11:51
  • 更新:2019-11-02 11:51
  • 阅读:535

官方demo滚动实例不能滚动问题

分类:uni-app

官方滚动实例
/uni-app-hello/pages/component/scroll-view/scroll-view.vue

this.scrollTop = this.old.scrollTop; // 这一行不写,或写为0,都不能点击滚动到顶部,请问为什么

<template>  
    <view>  
        <page-head title="scroll-view,区域滚动师徒"></page-head>  
        <view class="uni-padding-wrap uni-common-mt">  
            Vertical Scroll  
            <text>\n纵向滚动</text>  
        </view>  
        <view>  
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"   
            @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">  
                <view id="demo1" class="scroll-view-item uni-bg-red">A</view>  
                <view id="demo2" class="scroll-view-item uni-bg-red">B</view>  
                <view id="demo3" class="scroll-view-item uni-bg-red">C</view>  
            </scroll-view>  
            <view @tap="goTop" class="uni-link uni-center uni-common-mt">  
                点击这里返回顶部  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                scrollTop: 0,  
                old: {  
                    scrollTop: 0  
                }  
            }  
        },  
        methods: {  
            upper: function(e){  
                console.log(e);  
            },  
            lower: function(e){  
                console.log(e)  
            },  
            scroll: function(e){  
                // console.log(e)  
                this.old.scrollTop = e.detail.scrollTop  
            },  
            goTop(e) {  
                this.scrollTop = this.old.scrollTop; // 这一行不写,或写为0,都不能点击滚动到顶部  
                this.$nextTick(function(){  
                    this.scrollTop = 0  
                });  
                uni.showToast({  
                    icon: "none",  
                    title: "纵向滚动 scrollTop 值已被修改为 0"  
                })  
            }  
        }  
    }  
</script>  

<style lang="stylus">  
.scroll-Y  
    height 300rpx;  

.scroll-view-item  
    height 300rpx;  
    line-height 300rpx  
    text-align center  
    font-size 36rpx  

</style>
2019-11-02 11:51 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复