自动识别高度"/>
uniapp 局部滚动自动识别高度
<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 = thisuni.getSystemInfo({success: function (res) {let WidthS = res.windowWidthif(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.scrollTopthis.$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 局部滚动自动识别高度
发布评论