uniapp在APP端使用swiper进行页面不卡顿滑动

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, //这是当前swiper在的索引
				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()
			}
        }
	}

你可能感兴趣的:(uni-app)