带你用uniapp从零开发一个仿小米商场_10.开发一个占剩余窗口的滚动区域

本文介绍: 如下,使用 uni的getSy ste mInf o,可以在success内获取到页面的可视高度,然后减去自定义的tag 切换蓝高度。如下图,这两个不用担心,因为这是uniapp 自带的,所以不用去管,直接减去我自己写的tag 切换栏的高度就好。这是就需要获取到屏幕可视区域的高度了,然后再减去我自己写的tag 切换栏的高度,那就是页面剩余高度了。但是这样写会有一个问题,那就是scroll的高,不是全屏的。然后对应的就是一个可纵向滚动的也可左右滚动的页面,如下,不设置高,那么高度就是子元素的高,然后就可以在页面上使用了。

首先是一个头部的tag 切换栏,这个很简单,就不多说

在这里插入图片描述
源码奉上

&lt;scroll-view scroll-x class="border scroll-row" style="height: 80rpx;"&gt;
	&lt;view class="scroll-row-item" style="height: 80rpx;line-height: 80rpx;" v-for="(item,index) in tabBars"
		:key="index" :class="tabIndex===index?'main-text-color':''"&gt;
		&lt;text class="font-md mx-3"&gt;{{item.name}}</text>
	</view>
</scroll-view>

然后对应的就是一个可纵向滚动的也可左右滚动的页面,
这里的实现思路是使用轮播图嵌套 sc roll 标签,

源码如下

<swiper :current="tabIndex" >
	<swiper-item v-for="(item,index) in tabBars" :key="index">
		<scroll-view scroll-y>
			<view>{{index}}</view>
		</scroll-view>
	</swiper-item>
</swiper>

但是这样写会有一个问题,那就是s c roll的高,不是全屏的
如下,不设置高,那么高度就是子元素的高,
而且s c roll要想纵向滚动,本来就应该给它设置一个高,

这是就需要获取到屏幕可视区域的高度了,然后再减去我自己写的tag 切换栏的高度,那就是页面剩余高度了
在这里插入图片描述
如下图,这两个不用担心,因为这是uniapp 自带的,所以不用去管,直接减去我自己写的tag 切换栏的高度就好

如下,使用 uni的getSyste mInfo,可以在success内获取到页面的可视高度,然后减去自定义的tag 切换蓝高度
最后将的出来的高度赋值给一个变量
然后就可以在页面上使用了

uni.getSystemInfo({
	success: res => {
		this.scrollH = res.windowHeight - uni.upx2px(80)
	}
})

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

tag 页面高度

相关文章

发表回复 取消回复

发表回复取消回复