uni-app 动态设置 swiper 的高度 自定义Tab

已于 2023-07-29 14:28:04 修改
阅读量658 收藏
点赞数
分类专栏： uniapp 文章标签： uni-app 前端 vue.js
于 2023-05-14 22:41:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72271537/article/details/130674833
版权

 功能，tab栏切换，左右滑动，swiper 的高度动态化

参考文章uni-app 动态设置 swiper 的高度_uniapp swiper高度__AZU的博客-CSDN博客

  

关键代码

	/** 获取子元素的高度 */
	const getSwiperItemHeight = (current = 0) => {
		uni.createSelectorQuery()
			.in(instance)
			.selectAll('.swiper-item-wrap')
			.boundingClientRect()
			.exec(data => {
				swiperHeight.value = data[0][current].height
			})
	}

	onMounted(async () => {
		getSwiperItemHeight()
	})

html部分

<template>
	<view class="content">
		<image class="image-bg" src="/static/game/bg.png" />
		<scroll-view id="tab" scroll-x="true">
			<view v-for="(item,index) in barNameList" :key="item.id" class="tabName" :data-current="index"
				@click="ontabtap">
				<text class="tabName_text" :class="tabIndex == index?'active_text':''">{{item.name}}</text>
			</view>
		</scroll-view>

		<swiper id="tabContent" :current="tabIndex" @change="tabChange" :style="{height:swiperHeight+'px'}">
			<swiper-item>
				<scroll-view scroll-y style="height: 100%;" class="nav_item">
					<view class="swiper-item-wrap" style="height: 50vh;background-color: #fff;">
						1111
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y style="height: 100%;" class="nav_item ">
					<view class="swiper-item-wrap" style="height: 20vh;background-color: #fff;">
						1111
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y style="height: 100%;" class="nav_item ">
					<view class="swiper-item-wrap" style="height: 70vh;background-color: #fff;">
						1111
						<!-- <cloudComputer/> -->
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

逻辑部分


<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue'

	import {
		onShow
	} from '@dcloudio/uni-app'
	// import home from './page/home.vue' //首页
	// import gameLibrary from './page/gameLibrary.vue' //游戏库
	// import cloudComputer from './page/cloudComputer.vue' //云电脑

	const tabIndex = ref(0) //索引值
	const barNameList = reactive([{
		name: '首页',
		id: '0'
	}, {
		name: '游戏库',
		id: '1'
	}, {
		name: '云电脑',
		id: '2'
	}])

	const instance = getCurrentInstance()
	const swiperHeight = ref() //swiper高度
	const swiperItemHeight =ref(80)

	// 窗口高度
	const windowHeight = ref()

	/** 获取屏幕剩余高度 */
	const getSwiperHeight = () => {
		uni.createSelectorQuery()
			.in(instance)
			.select('.page-head')
			.boundingClientRect()
			.exec(res => {
				const windowHeight = uni.getSystemInfoSync().windowHeight
				// 屏幕高度 - 顶部高度
				swiperHeight.value = windowHeight - res[0].height
			})
	}

	/** 获取子元素的高度 */
	const getSwiperItemHeight = (current = 0) => {
		uni.createSelectorQuery()
			.in(instance)
			.selectAll('.swiper-item-wrap')
			.boundingClientRect()
			.exec(data => {
				swiperHeight.value = data[0][current].height
			})
	}

	onMounted(async () => {
		getSwiperItemHeight()
	})

	/** Tab点击 */
	const ontabtap = (e) => {
		let index = e.target.dataset.current || e.currentTarget.dataset.current;
		switchTab(index);
	}
	
	/** switchTab切换 */
	const switchTab = (index) => {
		if (tabIndex.value == index) {
			return
		}
		getSwiperItemHeight(index)
		tabIndex.value = index;
	}

	/** swiper滑动时改变下标 */
	const tabChange = (e) => {
		let index = e.target.current || e.detail.current; // 获取到当前移动到第几个
		switchTab(index);
	}
</script>

css样式部分


<style lang="scss" scoped>
	.content {
		.image-bg {
			position: absolute;
			z-index: -2;
			top: 0;
			// left: 0;
			// right: 0;
			// bottom: 0;
			// right: 0;
			width: 100%;
			height: 80vh;
		}

		.image-bg::before {
			content: '';
			display: inline-block;
			width: 100vw;
			height: 20vh;
			position: absolute;
			top: 60vh;
			background: linear-gradient(to top, #FFFFFF 0%, rgba(123, 123, 123, 0.00) 100%);
		}

		#tab {
			width: 100%;
			display: flex;
			white-space: nowrap;
			padding: 40rpx 30rpx 0 30rpx;
			position: fixed;
			top: 0;
			z-index: 99;

			.tabName {
				color: #fff;
				display: inline-block;
				height: 80rpx;
				line-height: 80rpx;
				white-space: nowrap;
			}

			.tabName_text {
				line-height: 60rpx;
				margin-right: 35rpx;
				flex-shrink: 0;
				padding-bottom: 10rpx;
				display: flex;
				justify-content: center;
				font-size: 16px;
				padding-top: 10rpx;
			}
		}



		.active_text {
			position: relative;
			font-weight: 600;
		}

		.active_text::after {
			content: "";
			position: absolute;
			width: 50rpx;
			height: 4rpx;
			background-color: #F0B83D;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}

		#tabContent {
			width: 100%;
			position: relative;
			top: 120rpx;


			.nav_item {
				padding-left: 20rpx;
			}
		}


	}
</style>

整体代码

<template>
	<view class="content">
		<image class="image-bg" src="/static/game/bg.png" />
		<scroll-view id="tab" scroll-x="true">
			<view v-for="(item,index) in barNameList" :key="item.id" class="tabName" :data-current="index"
				@click="ontabtap">
				<text class="tabName_text" :class="tabIndex == index?'active_text':''">{{item.name}}</text>
			</view>
		</scroll-view>

		<swiper id="tabContent" :current="tabIndex" @change="tabChange" :style="{height:swiperHeight+'px'}">
			<swiper-item>
				<scroll-view scroll-y style="height: 100%;" class="nav_item">
					<view class="swiper-item-wrap" style="height: 50vh;background-color: #fff;">
						1111
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y style="height: 100%;" class="nav_item ">
					<view class="swiper-item-wrap" style="height: 20vh;background-color: #fff;">
						1111
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view style="height: 100%;" class="nav_item ">
					<view class="swiper-item-wrap" style="height: 70vh;background-color: #fff;">
						1111
						<!-- <cloudComputer/> -->
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue'

	import {
		onShow
	} from '@dcloudio/uni-app'
	// import home from './page/home.vue' //首页
	// import gameLibrary from './page/gameLibrary.vue' //游戏库
	// import cloudComputer from './page/cloudComputer.vue' //云电脑

	const tabIndex = ref(0) //索引值
	const barNameList = reactive([{
		name: '首页',
		id: '0'
	}, {
		name: '游戏库',
		id: '1'
	}, {
		name: '云电脑',
		id: '2'
	}])

	const instance = getCurrentInstance()
	const swiperHeight = ref() //swiper高度
	const swiperItemHeight =ref(80)

	// 窗口高度
	const windowHeight = ref()

	/** 获取屏幕剩余高度 */
	const getSwiperHeight = () => {
		uni.createSelectorQuery()
			.in(instance)
			.select('.page-head')
			.boundingClientRect()
			.exec(res => {
				const windowHeight = uni.getSystemInfoSync().windowHeight
				// 屏幕高度 - 顶部高度
				swiperHeight.value = windowHeight - res[0].height
			})
	}

	/** 获取子元素的高度 */
	const getSwiperItemHeight = (current = 0) => {
		uni.createSelectorQuery()
			.in(instance)
			.selectAll('.swiper-item-wrap')
			.boundingClientRect()
			.exec(data => {
				swiperHeight.value = data[0][current].height
			})
	}

	onMounted(async () => {
		getSwiperItemHeight()
	})

	/** Tab点击 */
	const ontabtap = (e) => {
		let index = e.target.dataset.current || e.currentTarget.dataset.current;
		switchTab(index);
	}
	
	/** switchTab切换 */
	const switchTab = (index) => {
		if (tabIndex.value == index) {
			return
		}
		getSwiperItemHeight(index)
		tabIndex.value = index;
	}

	/** swiper滑动时改变下标 */
	const tabChange = (e) => {
		let index = e.target.current || e.detail.current; // 获取到当前移动到第几个
		switchTab(index);
	}
</script>

<style lang="scss" scoped>
	.content {
		.image-bg {
			position: absolute;
			z-index: -2;
			top: 0;
			// left: 0;
			// right: 0;
			// bottom: 0;
			// right: 0;
			width: 100%;
			height: 80vh;
		}

		.image-bg::before {
			content: '';
			display: inline-block;
			width: 100vw;
			height: 20vh;
			position: absolute;
			top: 60vh;
			background: linear-gradient(to top, #FFFFFF 0%, rgba(123, 123, 123, 0.00) 100%);
		}

		#tab {
			width: 100%;
			display: flex;
			white-space: nowrap;
			padding: 40rpx 30rpx 0 30rpx;
			position: fixed;
			top: 0;
			z-index: 99;

			.tabName {
				color: #fff;
				display: inline-block;
				height: 80rpx;
				line-height: 80rpx;
				white-space: nowrap;
			}

			.tabName_text {
				line-height: 60rpx;
				margin-right: 35rpx;
				flex-shrink: 0;
				padding-bottom: 10rpx;
				display: flex;
				justify-content: center;
				font-size: 16px;
				padding-top: 10rpx;
			}
		}



		.active_text {
			position: relative;
			font-weight: 600;
		}

		.active_text::after {
			content: "";
			position: absolute;
			width: 50rpx;
			height: 4rpx;
			background-color: #F0B83D;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}

		#tabContent {
			width: 100%;
			position: relative;
			top: 120rpx;


			.nav_item {
				padding-left: 20rpx;
			}
		}


	}
</style>

刘海583
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用uni-swiper-dot组件，开发轮播图
04-28
1、使用HbuildX工具，引入uni-ui插件，使用uni-swiper-dot组件，开发轮播图 2、轮播图的三种mode:nav、dot、indexes
uniapp 解决swiper Tab选项卡切换高度自适应问题
xiakekeali的博客
09-20 1万+
uniapp 解决swiper滚动高度自适应问题 问题描述：使用的是uniapp 官网案例中的一个swiper插件（插件名：uni-swiper-dot），当需要tab滚动，但是它又只能在最外层的swiper处设置一个固定的高度，纠结很久以后，终于想出了办法，我把最内层我写的东西的高度的值取出来，然后在赋值给最外层，算是完成了swiper高度自适应的问题。 作为一个前端小白，使用uniapp开发a...
uni-app 微信小程序之swiper轮播图
最新发布
aaa123aaasqw的博客
05-30 300
【代码】uni-app 微信小程序之swiper轮播图。
uni-app 中 swiper 轮播图高度自适应
UserGuan的博客
09-04 7944
2、swiper 标签存在默认高度是 height: 150px；高度无法实现由内容撑开，在默认情况下，图片的高度显示总是 150px。1、在每次滑动切换的时候，动态地获取 swiper-item 内部的 DOM 的元素的高度。1、首先 swiper 标签的宽度是 width: 100%2、将获取的高度动态设置给 swiper 元素。
uni-app tab滑动切换
qq_43579525的博客
07-13 1万+
1.父组件index.vue <template> <view> <!-- * 头部tab * 1.头部tab在点击的时候需把自己的index传到父组件中去通过 * this.$emit('方法名',index); * * --> <swiper-tab-head :tabBars="tabBar...
uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
weixin_44519496的博客
08-02 1088
效果图： tab栏可以滑动，切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时，它会有一个默认的高度，你必须动态的获取数据列表的高度覆盖原来的默认高度。 下面是代码 html <template> <view> <scroll-view class="scroll1" scroll-x="true"> <view :class="currentTa
uniapp-微信小程序实现swiper左右滚动切换tab，上下滚动加载列表
weixin_51002293的博客
11-05 4335
也需要自定义，由于目前我的系统自带的还是正常的，所以还没有改造，但是体验没有scroll-view的好，因为顶部tab会遮挡下拉刷新的loading状态，后期再改造。3. 每个tab下的list的加载完成状态也需要隔离开，否则导致tab1切换到tab2以后，tab2将控制加载完成的状态改为true后，返回tab1无法加载第2页了。2. 由于最开始的代码是每次切换tab后都会重新请求，导致swiper还没切换成功的过程中，显示的列表错误。1. swiper高度问题，导致滑动不到最底部和最顶部。
uni-app项目练习2
05-16
3. **组件使用**：uni-app提供了丰富的内置组件，如view、text、image、button等，以及一些移动特有的组件，如navigator、swiper、picker等。学习如何在页面中使用这些组件，理解和掌握其属性、事件绑定等。 4. **...
使用uni-app搭建的企业OA app
03-23
在实现企业OA app的功能时，开发者可能会用到uni-app的组件如`uni-forms`（表单）、`uni-grid`（网格）、`uni-swiper`（轮播图）等，以及uniCloud（阿里云提供的云端服务）来实现数据的存储和同步，确保多平台的数据...
一个uni-app的列表展示小案例.zip
10-27
uni-app提供了丰富的组件库，如ListView、Cell、Swiper等，用于构建各种复杂的界面布局。在这个列表展示案例中，可能会使用到这些组件来动态加载和渲染数据。 【详细知识点】: 1. **uni-app框架**: uni-app是...
vue+uni-app轮播图.zip
03-29
在uni-app中实现轮播图，开发者可以利用uni-app提供的API和组件，如uni-swiper，来创建滑动效果，并结合uni-app的样式层叠能力实现自定义样式。 轮播图的实现通常包括以下几个关键点： 1. 数据绑定：轮播图的图片...
uniapp解决动态设置swiper轮播图高度的问题(不同图片数组高度不一致,数组内图片高度一致)
weixin_45562267的博客
11-03 3168
功能需求:不同数组的图片高度不一致,数组内图片高度一致的情况下,动态设置swiper高度 尝试过百度的获取图片高度的方法,发现获取高度不准确,后改用获取设备可视宽度和图片高度的方法解决 动态设置swiper高度的问题 原使用不准确代码: getElementHeight(element) { setTimeout(() => { let query = uni.createSelectorQuery().in(this); query.select(element).bou
uniapp swiper Tab选项卡切换高度自适应问题
weixin_41224335的博客
10-24 3489
uniapp swiper Tab选项卡切换高度自适应问题 uniapp swiper Tab选项卡切换高度自适应问题 swiper需要指定固定高度，但数据是动态加载的，所以高度需要自适应。 基本思路：就是获取展示内容的高度 赋值给swiper。但是中间有好多坑，淌过了在这里分享一下思路，经验不足，有改进的地方欢迎多多指点 <wuc-tab :tab-list="tabList3" :tab...
uniapp轮播图实例和动态获取实例
wanghongpu9305的博客
05-04 1466
在上面的示例中，我们从数据中动态生成了三个 `uni-swiper-item` 组件，并在 `uni-swiper` 组件中添加了 `change` 和 `tap` 事件监听器。在上面的示例中，我们使用 `uni-swiper` 组件包裹了三个 `uni-swiper-item` 组件，每个 `uni-swiper-item` 组件中包含一个 `image` 组件，用于显示轮播图中的图片。`autoplay` 和 `interval` 属性用于指定轮播图的自动播放和切换时间间隔。
uniapp-vue2-微信小程序-滑块验证组件wo-slider
狼性书生
08-22 2577
wo-slider是一款支持高度自定义的滑块验证组件，采用uniapp-vue2编写的滑块验证组件。
uni-app 简单顶部tab切换菜单3—可滑动切换菜单
qq_59795720的博客
05-27 6270
顶部tab是可滑动，用scroll-view实现，内容部分比较潦草，可以自行更改，话不多说上代码，最后有完整的代码（复制即可用） HTML <template> <view> <!-- tab部分 --> <swiper class="ct_tab"> <swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in t...
uniapp根据不同高度的元素动态设置高度
m0_62217360的博客
12-02 2991
uniapp根据不同高度的元素动态设置高度
动态设置小程序swiper的高度
kilito_01的博客
07-26 557
动态设置小程序swiper的高度
swiper做选项卡切换，内容高度不一样，如何自适应
热门推荐
一只哆啦A梦的博客
07-11 2万+
加一个 autoHeight: true
uni-app如何重置swiper的current
07-27
要重置uni-app中swiper组件的current属性，你可以通过以下步骤实现： 1. 首先，在vue文件中找到swiper组件的标签，并添加一个ref属性，用于在代码中引用该组件。例如： ```html <swiper ref="mySwiper" :current=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘海583

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值