HTML

<swiper
	:style="'height:' + (isChangeSwiper ? newHeight : active == '0' ? navHigh0 : navHigh1) + 'px;'"
	@change="bindchange"
	@transition="bindtransition"
	@animationfinish="bindanimationfinish"
>
	<swiper-item v-for="(item, indexw) in menuList" :key="indexw">
		<view class="menu" :id="'nav' + indexw">
			<view class="" v-for="(itemn, indexn) in item" :key="indexn" @click="jump(itemn)">
				<image :src="itemn.icon_url" mode=""></image>
				<view class="fs-24">{{ itemn.title }}</view>
			</view>
		</view>
	</swiper-item>
</swiper>

JS

提示:这里可以添加本文要记录的大概内容:

export default {
	data() {
		return {
			rowsNum: 0,
			number: 2,
			myList: [],
			active: 0,
			navHigh0: 0,
			navHigh1: 0,
			newHeight: 0,
			isChangeSwiper: false
		};
	},
	methods: {
		getSwiperCount() {
			/* rowsNum 显示行数  0: 1行  1: 2行 2: 3行 3 4行 */
			/* number  单行显示  0: 3个  1: 4个 2: 5个 */
			this.pageNum((this.rowsNum + 1) * (this.number + 3));
		},
		// 数据分组
		pageNum(num) {
			let count = Math.ceil(this.myList.length / num);
			let goodArray = new Array();
			// 把整个数据截取为固定数量为一组,每组数据个数相同
			// for (let i = 0; i < count; i++) {
			// 	let list = this.quanyiTab.slice(i * num, i * num + num);
			// 	if (list.length)
			// 		goodArray.push({
			// 			list: list
			// 		});
			// }

			// 这里展示两页不同个数的数据,以便展示滑动高度变化
			goodArray[0] = this.myList.slice(0, num);
			goodArray[1] = this.myList.slice(num);
			// console.log(goodArray);
			this.menuList = goodArray;
			this.$nextTick(() => {
				//获取每页轮播的高度
				this.menuHeight();
			});
		},
		menuHeight() {
			let that = this;
			const query = uni.createSelectorQuery().in(this);
			
			query
				.select('#nav0')
				.boundingClientRect((data) => {
					// console.log(data);
					that.navHigh0 = data.height;
				})
				.exec();

			query
				.select('#nav1')
				.boundingClientRect((data) => {
					// console.log(data);
					that.navHigh1 = data.height;
				})
				.exec();
		},
		bindchange(e) {
			this.active = e.detail.current;
			// this.menuHeight();
		},
		// 计算滑动时候的一个比例,核心代码
		bindtransition(e) {
			// e.detail.dx 为滑动的距离
			// 滑动的距离 / 总距离 = 滑动的比例
			const per = e.detail.dx / (app.globalData.screenWidth - 20); // 由于轮播图左右两边margin值为10,所以要减掉
			// console.log(per);
			// 按滑动的比例计算出高度变化的比例
			const newHeight = (this.navHigh1 - this.navHigh0) * per; // 两个轮播的高度差 * 计算的比例
			if (this.active == 0) {
				if (per > 0) {
					this.newHeight = this.navHigh0 + newHeight;
				} else {
					this.newHeight = this.navHigh0;
				}
			} else if (this.active == 1) {
				if (per > 0) {
					this.newHeight = this.navHigh1;
				} else {
					this.newHeight = this.navHigh1 + newHeight;
				}
			}
			
			this.isChangeSwiper = true;
		},
		bindanimationfinish() {
			this.isChangeSwiper = false;
		},
	}
}

效果演示

在这里插入图片描述

更多推荐