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

uniapp实现滚动到底部加载更多数据
如果数据量非常大的话,数据批量加载是一种优化手段,那么,如何实现? onReachBottom uniapp的生命周期onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底 ...
uniapp 获取图片的高度_uni-app获取元素高度等信息，并设置元素top信息
本文主要简介uni-app获取元素信息及设置信息等获取元素高度可查看官方文档 mounted() { const query = uni.createSelectorQuery().in(this ...
手机端局部滚动问题 overflow-y:auto
手机端局部滚动问题 overflow-y:auto 参考文章: (1)手机端局部滚动问题 overflow-y:auto (2)scroll无效,使用iscroll解决备忘一下.
仿比心源码，uniApp自适应手机屏幕高度
仿比心源码,uniApp自适应手机屏幕高度 // 获取屏幕高度用res.screenHeight let _this = this; //uni.getSystemInfoSync异步接口uni.ge ...
uni-app如何让图片高度自适应
在uni-app框架中,图片image标签是自带默认高度的,在下方图片可以看到,一个正方形的图片,初始化被设置了240px高度 uni-app如何让图片高度自适应有很多大佬就在想了,定义个图片高度不 ...
uni-app无限滚动
uni-app无限滚动 <template><view><view class="roll"><view class="roll ...
H5解决浏览器,微信背景的上下滑动问题，脱离窗口的js局部滚动解决方法
当我们使用手机浏览器或微信浏览器打开Html网页的时候,如果上下滑动页面,页面就会出现黑色的空白(如图所示).那么如何解决滑动的时候如何避免出界,出现头部和底部的黑底? js代码: var metho ...
uni-app 顶部导航栏高度计算 + 胶囊高度计算
uni-app 顶部导航栏高度计算 + 胶囊高度计算文章目录 uni-app 顶部导航栏高度计算 + 胶囊高度计算 uni-app 一.顶部导航栏高度计算二.胶囊高度计算总结 uni-app u ...
uniapp 页面滚动获取元素高度
onPageScroll() {let _this = this;let info = uni.createSelectorQuery().select(".entity-box" ...
uni-app 学习：页面高度设置100%
uni-app 中页面默认没有100%,内容只显示一半,而且轮播图随内容区域一起滚动,不能固定,如下图所示: 在独立页面给page加高度100%, 此时h5页面正常但是在小程序中依旧是不起作用的,如下 ...

uniapp 局部滚动自动识别高度

uniapp 局部滚动自动识别高度相关推荐

最新文章

热门文章