uniapp swiper Tab选项卡切换高度自适应问题_兔子。。的博客-程序员宝宝

技术标签: swiper  tab  uniapp  

uniapp swiper Tab选项卡切换高度自适应问题

uniapp swiper Tab选项卡切换高度自适应问题

swiper需要指定固定高度,但数据是动态加载的,所以高度需要自适应。
基本思路:就是获取展示内容的高度 赋值给swiper。但是中间有好多坑,淌过了在这里分享一下思路,经验不足,有改进的地方欢迎多多指点

<wuc-tab :tab-list="tabList3" :tabCur.sync="TabCur3" tab-class="text-center text-black bg-white" select-class="text-orange"></wuc-tab>
<swiper @change="swiperChange3" :style="{height:swiperHeight+'px'}" >
<swiper-item>
 <view class="list1">
</view>
</swiper-item>
<swiper-item>
 <view class="list2">
</view>
</swiper-item>
data() {
 return {
tabList3: [
{
name: 'tab1'
},
{
name: 'tab2'
}
],
  TabCur3: 0,
  listHeight:0,  //内部的高度
  swiperHeight:0,  //外部的高度
 }
}
watch: {
//监听list1数据
	    typeFirstList: function() {
			let _this = this;
			this.$nextTick(function() {
				_this.initSwiperHeight('.list1');
			})
	    }
	},
methods: {
		initSwiperHeight(list){
			let _this = this;
			let info = uni.createSelectorQuery().select(list);
			info.boundingClientRect(function(data) {
				_this.swiperHeight = data.height + 10;
			}).exec();
		},
		swiperChange3(e) {
			// let _this = this;
			// let { current } = e.target;
			this.TabCur3 = e.target.current;
			// 不同的tab不同的高度赋不同的值
			if(this.TabCur3==1){
				// let list = ".list2";
				this.initSwiperHeight('.list2');
			}else{
				this.initSwiperHeight('.list1');
			}
		}
	}

代码可能不全,但整体思路都在上边了

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41224335/article/details/102716878

智能推荐

速度提升8倍!全球首个开源图像识别系统PP-ShiTu全面升级_Python进阶者的博客-程序员宝宝

自动驾驶、泛电商、互联网金融认证等这些全球最火爆的产业成功背后的关键技术是什么?各大厂攻城狮们年薪百万的秘籍又是什么?而我们又如何能在”内卷洪流”中冲出重围,”不肝”、”不躺”,登上人生巅...

使用ADB卸载Android内置应用_安卓adb卸载系统应用_weixin_41991813的博客-程序员宝宝

OS:ColorOS13 手机:OPPO Reno6写在前面:防自己忘记写的笔记,但愿以后都不用再调试了。OPPO是真的狗啊:没有恢复出厂设置选项,OS不能回滚到出厂的旧版本;如果自己安装apk,必须要登录“My OPPO”,这也是安卓机干的事?算了,不骂了,谷歌自己也不怎么讲武德。手机打开USB调试:1、打开手机【设置】——【关于手机】——找到【版本号】,连续点击版本号7次;2、返回上一步,就会多了一个【开发人员选项】的菜单;3、打开【开发人员选项】,即可找到USB调试,勾..

Solana白皮书中文翻译(1)_Tangenter的博客-程序员宝宝

作者:Anatoly Yakovenko([email protected])翻译:tangenter.eth摘要本文提出了一种新的区块链架构,其基础是一种能够验证链上事件发生的先后顺序及时间间隔的新共识算法,称作工作历史证明(Proof of History,PoH)。PoH算法能够将不可信任的时间间隔数据打包为区块链账本——一种只允许添加数据的数据结构。与工作量证明(Proof of Work,PoW)和权益证明(Proof of Stake,PoS)这些原有的共识算法相比较,PoH可减少具备拜占

随便推点

已知某年某月,请输出这个月共有多少天(switch语句)_GHYshuai55的博客-程序员宝宝

package com.zhidi;public class Lianxi08 {public static void main(String[] args) {// 已知某年某月,请输出这个月共有多少天。(switch语句)int year = 2012;int month = 2;switch(month){case 1:case 3:

带壳截图 android,给手机截屏带个「套」:带壳截图应用合辑_红色有角的博客-程序员宝宝

现在,在社交平台分享手机截屏已经是各位习以为常的事情。而今天,少数派将为大家盘点几款独特的「带壳截图」应用,覆盖三大主流平台,种类繁多,总有一款适合你。新手教学:如何截屏既然今天的主角是「带壳截图」应用,那么文章开始之前,我们先来回顾各大平台的截屏方式。在 Android 2.x 时代,截取手机屏幕并不是一件容易的事情,需要获取 Root 权限,然后借助第三方截图应用才可实现手机屏幕的捕捉。而伴随...

python一键合并上千个Excel表_lishoubin_198308的博客-程序员宝宝

import osimport xlwtimport xlrdimport xlutils.copyimport time"""公司老板需求: 1. 将上千个Excel表合并成一个表里 2. 不管你用什么方法,实现效果就行"""# #################################### 代码走起来呀!!!"""思路分析: 1. 创建一个空表名叫"总表",表格形式须和合并表的一样 2. 获取需要合并文件夹中的所有excel表的名字(文件名...

用友U9领航,高端ERP市场成为新蓝海_weixin_33725272的博客-程序员宝宝

近期,国内IT权威研究机构计世资讯(CCWResearch)与制造业信息化专业机构E-worksResearch分别就国内管理软件高端ERP市场发展状况、用友U9V2.0版产品进行了第三方研究、比较与评测,记者就报告部分内容预解读,以抛砖引玉,希望更多读者真实了解国内管理软件厂商发展进步状况,以更客观、理性的视角来看待以用友U9为代表的本土高端ERP与SAP、O...

Docker学习总结(33)——Docker环境下搭建 MySQL 主从复制_harris135的博客-程序员宝宝

搭建环境Centos 7.2 64位MySQL 5.7.13Docker 1.13.1接下来,我们将会在一台服务器上安装docker,并使用docker运行三个MySQL容器,分别为一主两从。安装docker执行命令[[email protected]_0_17_centos ~]# yum install docker如果有提示,一路y下去安装成功启动Docker后,查看版本[[email protected]_0_17_centos...

推荐文章

热门文章

相关标签