在uniapp中设置scroll-view的高度,通常有几种方法,这些方法可以根据不同的布局需求进行选择。以下是几种常见的设置scroll-view高度的方法: 1. 使用固定高度 如果你知道scroll-view需要的确切高度,可以直接在样式中设置这个高度。例如: vue <template> <scroll-view class="scroll-view" scroll-y="true...
方案1:js计算高度 实现原理: 通过js获取设备高度和外层父元素位置信息,动态计算出剩余高度,也就是scroll-view的高度 // 获取总高度letscreenHeight=uni.getSystemInfoSync().windowHeight;// 布局位置信息constquery=uni.createSelectorQuery().in(this)query.select('#scroll-view').boundingClientRect((data)=>{/...
简介: uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新) 自适配高度 自定义的顶部导航栏,可参考博文 https://blog.csdn.net/weixin_41192489/article/details/134852124 如图可见,在页面滚动过程中,顶部导航栏和底栏未动,仅中间的内容区域可滚动。 整个页面的高度设置为 100%,并采用 flex 布局 ...
1、获取某个view的高度,以下面 view 为例 // 给 view 添加id比如“test_id” <viewid="test_id"></view> // 然后在页面的 onReady 生命周期中获取该id对应的高度,单位 pxonReady() { console.log('onReady'); uni.createSelectorQuery().select("#test_id").boundingClientRect(res => {letviewH...
js 实现:直接获取到屏幕的整个高度,然后减去上下模块的高度就是中间的 scroll-view 高度了。 代码语言:javascript 复制 // 获取屏幕可用高度letscreenHeight=uni.getSystemInfoSync().windowHeight css 实现:外层盒子直接 flex 布局,主轴改为 column 纵向,然后中间部分在 scroll-view 标签外面再套一个div,这个div 的...
// 计算scroll-view高度 uni.getSystemInfo({ success: resu => { const query = uni.createSelectorQuery() query.select('.swiper-item').boundingClientRect() query.exec(res => { this.scrollHeight = resu.windowHeight - res[0].top +'px'; ...
一套代码打包多个微信小程序,一套代码打包多个抖音小程序,有需要请到uniapp插件里面下载享用 下一篇 » taro小程的ScrollView,完美解决动态高度问题 引用和评论 注册登录 获取验证码 新手机号将自动注册 登录 微信登录免密码登录密码登录 继续即代表同意《服务协议》和《隐私政策》...
将你需要计算元素高度的元素,给与heightTest类,进行节点查询。 使用fields方法,获取到各个元素的高度值。data[0].height是最外层,即总高度,再减去其他占位元素的高度以及边距,就能得出你需要的滚动元素高度值。 我这是把scroll-view封装在一个组件里,所以计算高度时,先要隐藏该组件:v-if = 'false'。 算出高度后...
1.使用uni.getSystemInfo(OBJECT)API接口获取设备屏幕高度 2.使用uni.createSelectorQuery()获取元素到屏幕顶部的距离 实现过程: 1.页面部分的代码(只放需要获取的部分了其他部分根据情况来) // scroll-view的代码 class名为sv 使用:style动态绑定高度<scroll-viewscroll-y="true"class="sv":style="{height:nav...