uniapp swiper Tab选项卡切换高度自适应问题_uniapp 页面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');
			}
		}
	}

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

本文链接：https://blog.csdn.net/weixin_41224335/article/details/102716878

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Mui.ajax请求服务器正确返回json数据格式-程序员宅基地

文章浏览阅读357次。ajax：mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, dataType:'json',//服务器返回json格式数据 type:'post',//HTTP请求类型 ..._mui ajax 服务器返回 json

数据导入到Access特别慢的解决办法-程序员宅基地

文章浏览阅读1k次。数据导入到Access有人说用事务，我在开发中用了事务还是特别慢，可能是因为Access数据库不支持批量执行SQL语句的原因吧，虽然微软建议使用ADO.NET操作数据库，但对于Access来说效率太差了，可有时候又迫不得已只能用Access，那么我们只用换一种操作数据库的方式了，这次用到了ADODB，虽然ADODB已经过时了，但它对数据库的直接操作还是要比封装好的ADO.NET快很多。下面是代码。..._excel向access追加记录很慢 vb.net

ffmpeg下载安装教程_ffmpeg官网下载-程序员宅基地

文章浏览阅读2.1k次。ffmpeg下载安装教程_ffmpeg官网下载

内核开发基础——'make menuconfig' requires the ncurses libraries-程序员宅基地

文章浏览阅读92次。root@zhangbin-desktop-ubuntu:/usr/src/linux-headers-2.6.32-27# make menuconfig HOSTCC scripts/basic/fixdep HOSTCC scripts/basic/docproc HOSTCC scripts/basic/hash HOSTCC scripts/kconfig..._make menuconfig' requires the ncurses libraries.

Emacs之ditaa与PlantUML与dot绘图环境配置-程序员宅基地

文章浏览阅读688次。本文介绍如何使用ditaa与PlantUML与dot进行绘制流程图。ditaa与PlantUML都依赖java环境，所以事先需要有Java环境（不管我们使用的是何种OS）。Java环境的设置很简单，如果本地没有Java环境，请到Oracle官网下载之，这里就省略了。而dot绘图语言需要安装graphviz软件。本文作者使用的Windows环境..._ditaa图 plantuml

Ajax框架,DWR介绍，应用，样例-程序员宅基地

文章浏览阅读93次。使用Ajax框架1. 简化JavaScript的开发难度2. 解决浏览器的兼容性问题3. 简化开发流程经常使用Ajax框架Prototype一个纯粹的JavaScript函数库，对Ajax提供良好支持jQuery1．很优秀的JavaScript库，对Ajax提供了良好的支持2．与Prototype设计思想不同的是在使用jQuery之后，开..._dwr ajax简单介绍

随便推点

报错提示：java.lang.IllegalArgumentException: Target must not be null-程序员宅基地

文章浏览阅读1.3w次，点赞2次，收藏4次。欢迎使用Markdown编辑器报错提示：在这里插入代码片org.springframework.web.util.NestedServletException: Request processing failed; nested exception is java.lang.IllegalArgumentException: Target must not be null at org.springframework.web.servlet.FrameworkServlet.processRequest_target must not be null