<template>
<view class="box">
</view> -->
<view> 固定布冯</view>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" :style="{height:heightScc}"
@scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
</scroll-view>
</view>
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
点击这里返回顶部
</view>
</view>
</template>
<script>
export default {
data(){
return{
scrollTop: 0,
heightScc:"",
old: {
scrollTop: 0
},
}
},
created() {
let _this = this
uni.getSystemInfo({
success: function (res) {
let WidthS = res.windowWidth
if(WidthS<414){
_this.heightScc = 400 + "rpx"
}else{
_this.heightScc = 900 + "rpx"
}
}
});
},
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: function(e) {
this.scrollTop = this.old.scrollTop
this.$nextTick(() => {
this.scrollTop = 0
});
uni.showToast({
icon:"none",
title:"纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
</script>
<style lang="scss" scoped>
.box{
// .scroll-Y{
// height: 500rpx;
// }
#demo1{
height: 400rpx;
border-bottom: 2rpx solid #000000;
background-color: blue;
}
#demo2{
height: 400rpx;
border-bottom: 2rpx solid #000000;
background-color: red;
}
#demo3{
height: 400rpx;
border-bottom: 2rpx solid #000000;
background-color: blue;
}
}
</style>
uniapp 局部滚动自动识别高度
最新推荐文章于 2024-08-22 11:53:20 发布