uniapp在APP端使用swiper进行页面会卡顿,主要是渲染的数据有点多,这里只渲染三个数据就不好那么卡顿了,每次滑动后更新数据
<view>
<swiper @change="changePoint" circular :disable-touch="disableTouch">
<swiper-item v-for="(item, index) in orderSafeMonitorList" :key="index">
<view class="title">......</view>
</swiper-item>
</swiper>
</view>
export default {
data() {
return {
allOrderSafeMonitorList: [],
orderSafeMonitorList: [],
current: 0,
swiperIndex: 0,
disableTouch: false,
};
},
onLoad(option) {
this.getData()
},
methods: {
getData() {
this.allOrderSafeMonitorList = '全部测点数据'
this.getList()
},
getList() {
this.orderSafeMonitorList[1] = this.allOrderSafeMonitorList[this.current]
this.orderSafeMonitorList[0] = this.current == 0 ? this.allOrderSafeMonitorList[this
.allOrderSafeMonitorList.length - 1] : this.allOrderSafeMonitorList[this.current - 1]
this.orderSafeMonitorList[2] = this.current == this.allOrderSafeMonitorList.length - 1 ? this
.allOrderSafeMonitorList[0] : this.allOrderSafeMonitorList[this.current + 1]
this.getDetail()
},
getDetail() {
this.disableTouch = false
this.$forceUpdate();
},
changePoint(e) {
this.disableTouch = true
if (e.detail.current > this.swiperIndex) {
if (e.detail.current == 2 && this.swiperIndex == 0) {
if (this.current == 0) {
this.current = this.allOrderSafeMonitorList.length - 1
} else {
this.current = this.current - 1
}
} else {
if (this.current == this.allOrderSafeMonitorList.length - 1) {
this.current = 0
} else {
this.current = this.current + 1
}
}
} else {
if (e.detail.current == 0 && this.swiperIndex == 2) {
if (this.current == this.allOrderSafeMonitorList.length - 1) {
this.current = 0
} else {
this.current = this.current + 1
}
} else {
if (this.current == 0) {
this.current = this.allOrderSafeMonitorList.length - 1
} else {
this.current = this.current - 1
}
}
}
this.swiperIndex = e.detail.current
this.getList()
}
}
}