官方滚动实例
/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>
0 个回复