uniapp新手使用到這個插件時基本上難以避免的坑，網(wǎng)上解決方法不少，我目前找了一個感覺性能上可能不太好的，但起碼簡單有效。
上代碼
<template>
<view>
<swiper
:autoplay="false"
@change="changeSwiper"
:current="currentIndex"
:style="{ height: swiperHeight + 'px' }"
>
<swiper-item v-for="(item, index) in dataList" :key="item.id">
<view :id="'content-wrap' + index">
每一個swiper-item的內(nèi)容區(qū)域
....
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
//滑塊的高度(單位px)
swiperHeight: 0,
//當前索引
currentIndex: 0,
//列表數(shù)據(jù)
dataList: [],
};
},
created() {
//動態(tài)設(shè)置swiper的高度
this.$nextTick(() => {
this.setSwiperHeight();
});
},
methods: {
//手動切換題目
changeSwiper(e) {
this.currentIndex = e.detail.current;
//動態(tài)設(shè)置swiper的高度宰僧，使用nextTick延時設(shè)置
this.$nextTick(() => {
this.setSwiperHeight();
});
},
//動態(tài)設(shè)置swiper的高度
setSwiperHeight() {
let element = "#content-wrap" + this.currentIndex;
let query = uni.createSelectorQuery().in(this);
query.select(element).boundingClientRect();
query.exec((res) => {
if (res && res[0]) {
this.swiperHeight = res[0].height;
}
});
},
},
};
</script>
<style lang="scss">
</style>
- 思路就是給每個swiper-item下面的內(nèi)容加一個id，根據(jù)元素id獲取高度观挎，然后用nextTick把這個的高度賦值給swiper組件琴儿。這個性能肯定是不好的，因為使用了nextTick和獲取元素的高度嘁捷，這都是會造成js性能問題造成。哎，但是有什么辦法呢Ｐ巯晒屎！先解決問題再說把，如果哪位大佬有更好的方法缓升，歡迎指教鼓鲁。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
