小程序swiper垂向全屏滚动,slide之间循环跳动及滑动卡死问题

1.slide之间循环跳动问题

因为返回的文章id我绑定到了  item-id 属性上,反映到标签上即 current-item-id,这个属性值得重复即导致current

重复,也就会出现swiper在某一个区间段内重复循环。(我的业务场景,假如用户看完了所有文章,后台会继续随机返回文章)

所以我的文章id会出现重复情况也就出现了我的循环跳动问题;

2.滑动卡死问题

滑动过快,或者页面slide过多(个人觉得),会出现卡死,官方不建议单页面slide数量过多。log跟踪会发现e.detail.current=0;

我把current_now绑定到了current上,当出现卡死的时候重置了current为卡死的前一个slide。这个卡死问题不好复现,不过好像确实起作用了。欢迎纠正,谢谢

第二个问题参考了愤怒的小鸟:https://blog.csdn.net/oagnuygnef/article/details/80506442

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的示例代码,实现了在swiper-item中向左滑动显示删除按钮的功能: ``` // WXML代码 <swiper class="swiper" duration="{{duration}}" current="{{current}}" style="height: {{height}}px;"> <swiper-item class="swiper-item" wx:for="{{list}}" wx:key="{{index}}" data-index="{{index}}" style="height: {{height}}px;"> <view class="content" style="height: {{height}}px;"> <!-- 此处放置swiper-item的内容 --> </view> <view class="delete" style="width: {{deleteWidth}}px; height: {{height}}px; display: none;"> <text class="delete-text">删除</text> </view> </swiper-item> </swiper> // WXSS代码 .swiper { width: 100%; overflow: hidden; } .swiper-item { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; } .content { flex: 1; } .delete { position: absolute; top: 0; right: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: red; color: #fff; } .delete-text { font-size: 28rpx; } // JS代码 Page({ data: { duration: 500, height: 100, deleteWidth: 100, list: [ {text: 'item1'}, {text: 'item2'}, {text: 'item3'}, {text: 'item4'}, {text: 'item5'}, ], startX: 0, startY: 0, isMoving: false, }, onLoad: function () {}, onTouchStart: function (e) { this.setData({ startX: e.touches[0].clientX, startY: e.touches[0].clientY, isMoving: false, }); }, onTouchMove: function (e) { let {startX, startY, isMoving} = this.data; let currentIndex = e.currentTarget.dataset.index; if (isMoving) { return; } let moveX = e.touches[0].clientX - startX; let moveY = e.touches[0].clientY - startY; if (Math.abs(moveX) > Math.abs(moveY) && moveX < 0) { // 向左滑动 let deleteWidth = this.data.deleteWidth; let translateX = Math.max(-deleteWidth, moveX) + 'px'; this.setData({ isMoving: true, }); this.moveSwiperItem(currentIndex, translateX); } }, onTouchEnd: function (e) { let {startX, startY, isMoving} = this.data; let currentIndex = e.currentTarget.dataset.index; if (isMoving) { this.setData({ isMoving: false, }); let deleteWidth = this.data.deleteWidth; let moveX = e.changedTouches[0].clientX - startX; if (moveX < -deleteWidth / 2) { // 显示删除按钮 let translateX = -deleteWidth + 'px'; this.moveSwiperItem(currentIndex, translateX, () => { this.showDeleteButton(currentIndex); }); } else { // 隐藏删除按钮 let translateX = 0; this.moveSwiperItem(currentIndex, translateX); } } }, moveSwiperItem: function (index, translateX, callback) { let query = wx.createSelectorQuery().in(this); query.select('.swiper-item[data-index="' + index + '"]').boundingClientRect((rect) => { let width = rect.width; let height = rect.height; let left = index * width + parseFloat(translateX); let transition = 'left ' + this.data.duration + 'ms ease'; let style = 'position: absolute; top: 0; height: ' + height + 'px; width: ' + width + 'px; left: ' + left + 'px; transition: ' + transition + ';'; this.setData({ ['list[' + index + '].style']: style, }); if (typeof callback === 'function') { setTimeout(() => { callback(); }, this.data.duration); } }).exec(); }, showDeleteButton: function (index) { this.setData({ ['list[' + index + '].deleteButtonVisible']: true, }); }, hideDeleteButton: function (index) { this.setData({ ['list[' + index + '].deleteButtonVisible']: false, }); }, onDelete: function (e) { let index = e.currentTarget.dataset.index; let list = this.data.list; list.splice(index, 1); this.setData({ list: list, }); }, }); ``` 需要注意的是,以上代码仅为示例代码,具体实现方式可能因项目需求而有所不同。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值