uniapp 局部滚动自动识别高度

编程入门 行业动态 更新时间:2024-10-26 14:27:27

uniapp 局部滚动<a href=https://www.elefans.com/category/jswz/34/1763742.html style=自动识别高度"/>

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 局部滚动自动识别高度

本文发布于:2024-03-23 17:12:35,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1740732.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:自动识别   局部   高度   uniapp

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!