哭.png

這個(gè)是我在用官方組件然后對(duì)之無可奈何之后的解決方法-----人工封裝（對(duì)不起分别，我太菜了），已經(jīng)不是swiper了存淫，標(biāo)題黨請(qǐng)移步耘斩。
正題開始吧，這是一個(gè)組件桅咆，先給出調(diào)用方法

 <infinite-scroll 
              banner="{{data.resultArr.goods}}"
              itemWidth="{{233}}"
              itemHeight="{{296}}"
              collectionurl="{{data.collection.url}}"
              autoplay="{{true}}"
              duration="{{0.5}}"
              interval="{{3}}"
              scale="{{0.8}}"
              onGoCollection="goCollection" 
        ></infinite-scroll>
<!--onGoCollection這個(gè)是我自定義方法括授，請(qǐng)自行選取-->

調(diào)用的有了，現(xiàn)在上正餐
創(chuàng)建一個(gè)組件岩饼，組件名稱愛誰誰
首先是.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文件

<view class="com-swiper-container">
    <view class="com-swiper-wrapper">
        <view class="com-swiper-content" style="width:{{len*itemWidth}}rpx;transform:translateX({{-currentIndex*itemWidth+(750-itemWidth)/2}}rpx);{{effect}}" onTouchStart="touchStart" onTouchEnd="touchEnd">
            <block a:for="{{swiperData}}">
                <view class="com-swiper-slide" style="{{`width:${itemWidth}rpx;height:${itemHeight}rpx;${currentIndex==index?active:normal}`}}">
                    <image class="image" mode="widthFix" src="{{item.image&&item.image.src}}"/>
                </view>
            </block>
        </view>
    </view>
    <view class="com-swiper-bullet">
        <block a:for="{{swiperData}}" a:for-index="index" a:for-item="item">
            <view class="touch-bullet" a:if="{{index>=initIndex&&index<initIndex*2}}" data-index="{{index}}" onTap="handleBullet">
                <view class="bullet normal" a:if="{{currentIndex!=index}}"></view>
                <view class="bullet active" a:if="{{currentIndex==index}}"></view>
            </view>
        </block>
    </view>
</view>

然后這里是.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)
       }
   }
}
//判斷數(shù)據(jù)類型
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;
   }
}
//復(fù)制
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,//當(dāng)前輪播位置序號(hào)
       initIndex: '',//初始放大元素序號(hào) 默認(rèn)3
       effect: '',//切換效果
       normal: '',//初始樣式
       active: '',//當(dāng)前放大樣式
   },
   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,//是否自動(dòng)輪播
       duration: 0.5,//持續(xù)時(shí)間
       interval: 3,//間隔時(shí)間
       scale: 0.9,//縮放比率
       direction: 'left',//自動(dòng)輪播方向
   },
   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);
           });
           //自動(dòng)切換
           this.slideAutoPlay();
       });
   },
   didUpdate() { },
   didUnmount() { },
   methods: {
       //觸摸開始
       touchStart(e) {
           startX = e.changedTouches[0].clientX;
       },
       //觸摸結(jié)束
       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);
               }
           })
       },
       //開始自動(dòng)播放
       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)
           }
       },
       //點(diǎn)擊觸點(diǎn)
       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
           }, () => { })
       },
   }
});

結(jié)語：菜狗就到這里了荚虚，有好的方法什么的，大家評(píng)論區(qū)踴躍發(fā)言吧