哭.png
这个是我在用官方组件然后对之无可奈何之后的解决方法-----人工封装（对不起，我太菜了），已经不是swiper了，标题党请移步。
正题开始吧，这是一个组件，先给出调用方法
调用的有了，现在上正餐
创建一个组件，组件名称爱谁谁
首先是.acss文件
.com-swiper-container { position: relative; width: 100%; margin: 0 auto; overflow: hidden;}
.com-swiper-wrapper { position: relative; width: 100%; overflow: hidden;}
.com-swiper-content { display: flex; width: 100%; will-change: transform;}
.com-swiper-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; width: 570rpx; height: 310rpx; overflow: hidden;}
.com-swiper-slide .image { display: block; width: 100%; font-size: 0; border: 0;}
.com-swiper-bullet { display: flex; justify-content: center; align-items: center; width: 100%; height: 50rpx; overflow: hidden;}
.com-swiper-bullet .touch-bullet { width: 20rpx; height: 20rpx; margin: 0 5rpx; border-radius: 50%;}
.com-swiper-bullet .touch-bullet .bullet { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;}
.com-swiper-bullet .touch-bullet .normal { background: #000;}
.com-swiper-bullet .touch-bullet .active { background: #ff0000;}
其次是.axml文件
然后这里是.js文件
//防止反跳
function debounce(func, wait, immediate) {
let timer;
return function () {
let context = this, args = arguments;
if (timer) clearTimeout(timer);
if (immediate) {
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait);
if (callNow) func.apply(context, args);
} else {
timer = setTimeout(() => {
func.apply(context, args);
}, wait)
}
}
}
//判断数据类型
function isType(target) {
if (target === null) return 'null';
var result = typeof (target);
if (result === 'object') {
var str = Object.prototype.toString.call(target);
var obj = {
'[object Array]': 'array',
'[object Object]': 'object',
'[object Number]': 'objectNumber',
'[object Boolean]': 'objectBoolean',
'[object String]': 'objectString',
}
return obj[str];
} else {
return result;
}
}
//复制
function copy(data, loop) {
let temp = data;
let type = isType(data);
for (var i = 0; i < loop - 1; i++) {
if (type == "array" || type == "string") {
data = data.concat(temp);
}
}
return data;
}
var startX = 0, endX = 0;
Component({
mixins: [],
data: {
currentIndex: null,//当前轮播位置序号
initIndex: '',//初始放大元素序号 默认3
effect: '',//切换效果
normal: '',//初始样式
active: '',//当前放大样式
},
props: {
banner: [
{ "image": { "src": "https://img.alicdn.com/imgextra/i1/907349826/O1CN01fQq7ea2MSMNGya0o6_!!907349826.png" }, "url": "", "pop1": "", "pop2": "", "popw": "" },
{ "image": { "src": "https://img.alicdn.com/imgextra/i1/907349826/O1CN01wW0pxi2MSMNAig3Qn_!!907349826.png" }, "url": "", "pop1": "", "pop2": "", "popw": "" },
{ "image": { "src": "https://img.alicdn.com/imgextra/i1/907349826/O1CN01PNFPtL2MSMNLfK1Vk_!!907349826.png" }, "url": "", "pop1": "", "pop2": "", "popw": "" },
],
autoplay: false,//是否自动轮播
duration: 0.5,//持续时间
interval: 3,//间隔时间
scale: 0.9,//缩放比率
direction: 'left',//自动轮播方向
},
didMount() {
let { banner, scale, duration } = this.props;
let swiperData = copy(banner, 3);
let len = swiperData.length;
let initIndex = len / 3;
this.setData({
'len': len,
'initIndex': initIndex,
'currentIndex': initIndex,
'swiperData': swiperData,
'normal': `transform:scale(${scale});transition:all ${duration}s linear 0s;`
}, () => {
['slideLeft', 'slideRight', 'handleBullet'].forEach(it => {
this[it] = debounce(this[it], duration * 1000, true);
});
//自动切换
this.slideAutoPlay();
});
},
didUpdate() { },
didUnmount() { },
methods: {
//触摸开始
touchStart(e) {
startX = e.changedTouches[0].clientX;
},
//触摸结束
touchEnd(e) {
this.slideAutoPlay();
endX = e.changedTouches[0].clientX;
if (Math.abs(endX - startX) < 50) { return }
if (endX - startX < 0) {
endX = 0, startX = 0;
return this.slideLeft();
}
endX = 0, startX = 0;
return this.slideRight();
},
//左滑
slideLeft() {
let { duration } = this.props;
let effect = `transition:${duration}s all;`, len = this.data.len, loopIndex = len / 3;
let currentIndex = this.data.currentIndex + 1;
this.setData({
currentIndex,
effect,
active: `transition:all ${duration}s linear 0s;`
}, () => {
if (currentIndex == len / 3 * 2) {
//this.setData({ loopIndex });
setTimeout(() => {
this.setData({
'currentIndex': loopIndex,
'effect': ``,
'active': ``,
'loopIndex': null
})
}, duration * 1000);
}
})
},
//右滑
slideRight() {
let { duration } = this.props;
let effect = `transition:${duration}s all;`, len = this.data.len, loopIndex = (len / 3 * 2) - 1;
let currentIndex = this.data.currentIndex - 1;
this.setData({
currentIndex,
effect,
active: `transition:all ${duration}s linear 0s;`
}, () => {
if (currentIndex == len / 3 - 1) {
//this.setData({ loopIndex });
setTimeout(() => {
this.setData({
'currentIndex': loopIndex,
'effect': ``,
'active': ``,
'loopIndex': null
})
}, duration * 1000);
}
})
},
//开始自动播放
slideAutoPlay() {
let { interval, autoplay, direction } = this.props;
if (this.timer) {
clearInterval(this.timer);
clearTimeout(this.timer);
}
if (autoplay == true) {
this.timer = setInterval(() => {
if (direction == "left") {
return this.slideLeft();
} else {
return this.slideRight();
}
}, interval * 1000)
}
},
//点击触点
handleBullet(e) {
let { target: { dataset } } = e;
let { duration } = this.props;
this.setData({
'currentIndex': dataset.index,
'effect': `transition:${duration}s all;`,
'active': `transform:scale(1);transition:all ${duration}s linear 0s;`,
'loopIndex': null
}, () => { })
},
}
});
结语：菜狗就到这里了，有好的方法什么的，大家评论区踊跃发言吧