swiper动态删除导致空白
发布于 5 年前 作者 vxiao 8987 次浏览 来自 问答

wxml:

<view class=“page-section page-section-spacing swiper”>

<swiper

indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"

interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">

<block wx:for="{{background}}" wx:key="*this">

<swiper-item>

<view bindtap=‘delete’ class=“swiper-item {{item}}”></view>

</swiper-item>

</block>

</swiper>

</view>

js:

Page({

data: {

background: [‘demo-text-1’, ‘demo-text-2’, ‘demo-text-3’],

indicatorDots: true,

vertical: false,

autoplay: false,

circular: false,

interval: 2000,

duration: 500,

previousMargin: 0,

nextMargin: 0

},

changeProperty: function (e) {

var propertyName = e.currentTarget.dataset.propertyName

var newData = {}

newData[propertyName] = e.detail.value

this.setData(newData)

},

changeIndicatorDots: function (e) {

this.setData({

indicatorDots: !this.data.indicatorDots

})

},

changeAutoplay: function (e) {

this.setData({

autoplay: !this.data.autoplay

})

},

intervalChange: function (e) {

this.setData({

interval: e.detail.value

})

},

durationChange: function (e) {

this.setData({

duration: e.detail.value

})

},

delete: function(e) {

this.data.background.splice(2, 1)

this.setData({

background: this.data.background

})

}

})

初始化页面:

滑动到C点击页面删除后,swiper呈现空白:

代码用的就是官方的demo,增加了tap删除功能。

3 回复

统一回复下这个问题,是因为current超出范围导致空白页,再次感谢大家的帮助

我建议删除之后刷新数据

回到顶部