当前位置: 首页 > article >正文

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

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

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

<scroll-view scroll-x class="border scroll-row" style="height: 80rpx;">
	<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':''">
		<text class="font-md mx-3">{{item.name}}</text>
	</view>
</scroll-view>

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

源码如下

<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>

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

这是就需要获取到屏幕可视区域的高度了,然后再减去我自己写的tag切换栏的高度,那就是页面剩余高度了
在这里插入图片描述
如下图,这两个不用担心,因为这是uniapp自带的,所以不用去管,直接减去我自己写的tag切换栏的高度就好
在这里插入图片描述
如下,使用uni的getSystemInfo,可以在success内获取到页面的可视高度,然后减去自定义的tag切换蓝高度
最后将的出来的高度赋值给一个变量
然后就可以在页面上使用了

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

如下,在html中动态绑定刚刚算出来的值的值
在这里插入图片描述
最后查看效果

在这里插入图片描述


http://www.kler.cn/a/153724.html

相关文章:

  • spring boot 3.2.0 idea从零开始
  • Synchronized原理分析
  • syslog定期rotate和限制其size的配置方法ubuntu上
  • 如何使用torchrun启动单机多卡DDP并行训练
  • opencv2.4 android编译
  • 内存免杀--
  • ubuntu18编译Android8的Failed to contact Jack server问题
  • 激光SLAM:Faster-Lio 算法编译与测试
  • python+pytest接口自动化(6)-请求参数格式的确定
  • LeetCode56. 合并区间
  • FL Studio2024重磅更新 带你了解FL21.2最新版本功能
  • C语言 柔性数组
  • RK3568笔记六:基于Yolov8的训练及部署
  • LCR 047. 二叉树剪枝 和 leetCode 1110. 删点成林 + 递归 + 图解
  • CentOS 系列:CentOS 7 使用 virt-install + vnc 图形界面/非图形界面 创建虚拟机
  • clickhouse的向量化执行
  • 熬夜会秃头——Beta冲刺总结随笔
  • 39.从0到上线三天搭建个人网站(第三天)
  • Node.js入门指南(完结)
  • 【Apache Doris】Manager极致丝滑地运维管理