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 ( )
}
}
}