微信小程序轮播图--滑动高度变化(uniapp)
·
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;
},
}
}
效果演示

更多推荐


所有评论(0)