小程序 计算scroll-view的自适应高度

最新推荐文章于 2025-05-05 09:03:45 发布
最新推荐文章于 2025-05-05 09:03:45 发布
阅读量500 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wenqaq/article/details/107397784

这几天学了小米商城的uniapp视频教程，scroll-view这个组件按视频教程来设置了2个y轴的列表，但是会出现2个列表同时滑动，看了一下文档，发现是scroll-view是要给个高度的，但我们不能给高度写死，网上找了很多方法都不行，后来找了一下文档的api看了下，有个方法能解决这个问题
用uni.getSystemInfoSync()这个api

export default {
   
	data() {
   
		return {
   
			winHeights:0
		};
	},
	onLoad
最低0.47元/天 解锁文章

200万优质内容无限畅学
微信小程序 scroll-view 自适应滚动视图
iamcrystal94的博客
06-07 4485
scroll-view详解通过获取设备高度来设置滚动视图高度。可以把滚动元素的高度也依此类推设置，这里不多说。style="height:{{height}}px;"index.wxml <!--index.wxml--> <view class="section"> <view class="section__title">vertical scroll&am
精确计算微信小程序scrollview高度，全机型适配
weixin_34281537的博客
07-17 1540
众所周知，可以滑动的 scroll 组件在移动端非常的重要，几乎每个页面都要用到。 而小程序的 scroll-view 组件就比较坑了，非得指定一个高度才能正常使用。布局复杂的时候谁还给你算高度啊。。。 坑归坑，没办法，还是得用……既然官方要求必须传高度，那就想办法计算吧。 一、布局分析，推导公式 先给个示例图： 这是一个稍微复杂点的页面，最上面是两个 tab 标签，每个标签的页面是一个子组件。...
scroll-view高度自适应
最新发布
qq_42924837的博客
05-05 365
scroll-view高度自适应
小程序scroll-view自适应高度
挚友阳光的博客
05-09 661
页面存在局部滚动 在不动态获取节点计算高度 让他根据父级自适应
【微信小程序scroll-view高度自适应】
qq_31629679的博客
06-25 5075
思路：找一个参考的布局通过uni.createSelectorQuery()获取其的高度，再通过uni.getSystemInfoSync().screenHeight获取屏幕高度，计算出大概的scroll_view之外高度即可（这个不能100%获取剩余的屏幕，通过适当的调整比例参数适配屏幕）注：如果需要100%适配就需要获取除scroll_view外的全部view的高度，用已获取的屏幕高度进行计算 （或将scroll_view之外的布局包裹在一个大的view中，这样就可以使用第二种情况进行处理）
小程序计算scroll-view 高度 (rpx)
libertine的博客
09-02 325
wx.getSystemInfo({ success:function (res) { let windowHeight = (res.windowHeight * (750 / res.windowWidth)) - 380; console.log(windowHeight) //获得rpx单位的窗口高度 _this.setData({ winHeight: windowHeight, }) } })
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
### 微信小程序中scroll-view实现自动滚动及高度自适应 #### 一、问题背景与需求分析 在微信小程序开发过程中，经常会遇到需要使用`scroll-view`组件来展示可滚动内容的需求。通常情况下，为了使`scroll-view`能够...
【爬坑】uniapp中scroll-view自适应高度
Eder的博客
07-25 1316
看了好多博客上处理uniapp的scroll-view自适应高度很多教程都是不能完全解决的，有的教程h5正常，app端就不正常了，我也是从教程简单的修改而达到h5和app都正常的，下面放代码 onReady() { //这里不要用onLoad，要不然提示错误 uni.getSystemInfo({ success: (res) => { let query=uni.createSelectorQuery().select(".roll"); //想要获取高度的元素名（class
scroll-view高度计算
qq_41241504的博客
04-26 466
<scroll-view scroll-y="{true}" style="height:{{scroll_height}}rpx"></scroll-view> onLoad: function (options) { let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度 let windowWidth = wx.getSystemInfoSync().windowWidth ...
计算scroll-view高度
diangedan的专栏
10-21 528
滚动高度
flex解决微信小程序ScrollView等组件高度自适应
jiaojiaoiso的博客
05-18 4349
//获取屏幕可用高度 let screenHeight = wx.getSystemInfoSync().windowHeight; 小程序页面开发时经常需要用的scroll-view 和 swiper这两个组件，官方文档显示这两个组件需要设置固定的高度才好用。 当数据列表高度不确定的时候，一开始我是对scroll-view或者swiper高度计算出固定数据。 //获取屏幕可用高度 let screenHeight = wx.getSystemInfoSync().windowHeight; ...
小程序 计算scroll-view的自适应高度，防止整个页面进行了滑动
田君的专栏
01-09 1万+
学习小程序已经快两周了，总结一下scroll-view使用遇到的问题 先上效果图吧 如图，我需要计算出scroll-view的高度，设置。否则scroll-view滑动的时候会带着页面滑动，并非实际业务需求。 1.设置scroll-view高度为动态的。 &amp;lt;scroll-view class='scroll-view-left' scroll-y='true' style='height...
Uniapp或者微信小程序如何动态的计算Scrollview的高度
hollebug的博客
08-22 4419
当一个小程序页面，顶部有搜索栏，或者分类查询时，我们想要保证它们能固定到顶部，就需要使用到Scrollview，那么如何确定Scrollview就是一个问题，这时我们可以使用以下代码来实现。先获取Scrollview距离顶部的高度，然后页面高度减去顶部距离，就能得到剩余的内容高度，如果底部还有操作条，那么我们再减去其高度，就能得到具体的Scrollview高度了。注意点是为了能准确的获取到页面元素，从而准确计算高度，我们需要将代码放到onReady生命周期里运行。
[微信小程序]通过计算其他view的高度，动态给定scroll-view的高度
weixin_34066347的博客
04-09 254
WXML节点信息API 微信小程序的开发文档有个很重要的api wx.createSelectorQuery() 具体大家还是看一下文档，我下面是直接上代码解说； wx.createSelectorQuery()文档 案例中的布局 这里页面上部分有三个view，它们的class分别是.kill-order、.bannerType、.search；然后接...
动态渲染scroll-view 滚动区域高度
前端的路上
12-01 850
动态渲染scroll-view 滚动区域高度
小程序 - 处理scroll-view组件的高度问题
热门推荐
前端Cocoko
11-22 1万+
在最近的小程序开发项目中有用到scroll-view组件，比较难搞定的是其高度问题，因其scroll-view自带一个高度，且需有高度才能有滑动效果； 1、js 计算高度； &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;scroll-view style='height:{{scrollHeight}}px' class='scrollStyle' scroll-y='true' bindscrolltolower=&amp;amp;amp;amp;a
微信小程序中scroll-view标签高度自适应问题
Jon Son的博客
08-21 4464
微信小程序中scroll-view标签高度自适应问题 应用情景：当父级元素中除了scroll-view标签外的高度都已经知道，想使scroll-view填充余下的空间。 解决方法： 父级使用flex布局，随便给在scroll-view设置一个高度，并使其css中flex:1 代码样例： wxml <view class="parent"> <view class="firs...
uniapp页面高度设置（铺满可视区域、顶部状态栏高度、底部导航栏高度）
m0_51431448的博客
01-10 2521
这里说几种在uniapp开发中，关于页面设置高度的几种情况。宽度就不说了哈，宽度设置百分比都会生效。首先我们要知道平时开发中，如果说没在uniapp做特殊处理，即正常情况下，所有的页面（.vue文件）中都是没有高度的（和vue一样），也就是说给最外层的的view标签设置高度为100%是没啥作用的，只要没内容高度依然是0。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值