解决了
<swiper class="swiper" @change="swiperChange" :current="currentSwiper" :indicator-dots="false" :autoplay="false" :duration="300">
<swiper-item @touchstart="touchStart" @touchmove.stop="touchMove" @touchend="touchEnd" v-for="(item, key) in itemList" :key="key">
<view class="swiper-item uni-bg-red" :class="item.class">{{item.text}}</view>
</swiper-item>
</swiper>
data () {
return {
currentSwiper: 0,
transShow: true,
modeClass: [],
swiperHeight: 0,
clientX1: 0,
itemList: [
{text: 'A', class: 'uni-bg-red'},
{text: 'B', class: 'uni-bg-green'},
{text: 'C', class: 'uni-bg-blue'},
]
}
},
touchStart (e) {
// console.log(e)
let client = e.changedTouches[0]
this.clientX1 = client.clientX
},
touchMove (e) {
let client = e.changedTouches[0]
// console.log(e)
if (this.clientX1 === 0) return false
// console.log(this.clientX1, client.clientX)
const clientX2 = client.clientX
let disX = this.clientX1 - clientX2
// console.log(disX)
// 判断左右滑动的阀值为15
if (disX > 0) {
// 左滑
if (this.currentSwiper + 1 > this.itemList.length - 1) {
this.currentSwiper = this.itemList.length - 1
} else {
this.currentSwiper = this.currentSwiper + 1
}
this.clientX1 = 0
}
if (disX < 0) {
// 右滑
if (this.currentSwiper - 1 <= 0) {
this.currentSwiper = 0
} else {
this.currentSwiper = this.currentSwiper - 1
}
this.clientX1 = 0
}
console.log(this.currentSwiper)
},
swiperChange (e) {
this.currentSwiper = e.detail.current
},
20 个回复
1***@qq.com
同问,
有解了吗?
4***@qq.com
同问,解决了吗
7***@qq.com
请问解决了吗
望城
同问
想得美
解决了吗
2***@qq.com
把vue页面换成nvue页面就行了,在nvue页面中swiper组件第一个和最后一个不会触底回弹
2020-12-01 14:21
想得美
回复 2***@qq.com: ios上会回弹啊
2020-12-01 15:02
2***@qq.com
回复 想得美: 嗯,Android上没有问题,这uni-app bug真tm太多了,切换成nvue页面后又多出许多bug,页面很多样式都变了,淦
2020-12-01 15:08
2***@qq.com - 只有背影
把vue页面换成nvue页面就行了,在nvue页面中swiper组件第一个和最后一个不会触底回弹
小少年报
顶一下 我也遇到了 官方能解决不
口区
circular属性:是否采用衔接滑动,即播放到末尾后重新回到开头
2020-12-16 10:56
小少年报
回复 口区: 不是 就是轮播图第一个右滑时导致左边有空白 他自己会反弹回去
2020-12-16 11:58
小少年报
就是滑动之后他会回弹回去,要的效果是没有左边的空白,
tuonioooo
2020年的问题 现在解决了没?
2022-03-02 11:39
小小菜qaq
20年的问题了,24年了解决了吗??
2024-05-08 10:40
choin
自己写一个这个组件
g***@126.com
解决了
1***@qq.com
试了一下卡顿
有时候还不能切换
2021-09-10 16:33
tuonioooo
这肯定卡顿呀,本身 swiper 就是调用了 touch 事件处理 再次调用 卡飞了都
2022-03-02 11:36
tuonioooo
在官网方swiper 组件的基础上 我解决了该问题 请关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b) 看留言的情况 我会发布解决方案 目前 测试在 H5和 安卓 app-plus 已经通过 ,苹果貌似跟H5差不多,所以几乎不用测试
3***@qq.com
发布了吗?
2022-09-23 14:19
tuonioooo
最主要是 我的解决方案 它是不卡顿
1***@163.com
在swiperOption里添加属性resistanceRatio :0就可以了
赵日天啊
解决了吗?
9***@qq.com
有解决方案吗 老哥
2022-12-21 09:52
2***@qq.com
解决了吗?
1***@qq.com
解决了吗
小小菜qaq
解决了吗
两年半的鸡酱
可使用j-swiper插件
https://ext.dcloud.net.cn/plugin?id=20576
2024-10-12 17:01
两年半的鸡酱
可使用j-swiper插件
https://ext.dcloud.net.cn/plugin?id=20576
靐齉齾麤龖龗 - 解决不了问题,那就解决提出问题的人
2025年了,官方组件的swiper应该增加个bounce属性来控制不是衔接滚动的时候是否需要回弹效果
靐齉齾麤龖龗
uniappx的加了个属性可以控制,uniapp怎么不同步改成一样的呢
2024-10-14 11:58
小小菜qaq
如果是app的话建议大家使用https://better-scroll.github.io/docs/zh-CN/guide/,实际用过,效果还不错,可以解决第一个无法左滑,最后一个无法继续右滑的问题