微信小程序轮播图

微信小程序中的轮播图可以直接使用swiper组件，代码如下：

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

但是，但是，但是，总有嫔妃想要为难本宫，想要实现下面这个效果，swiper就不行了(下面图片拷贝，实现效果一致)

 

<view class='slider' style="width:{{winWidth}}px;">
  <view>
    <view bindtouchcancel="sliderTouchCancel" bindtouchstart='sliderTouchStart' bindtouchend='sliderTouchEnd' bindtouchmove='sliderTouchMove' style='width:{{SliderData.totalWidth}}px;display:flex;transform:translate({{SliderData.x}}px,0)'>
        <block wx:for="{{SliderData.datas}}" wx:key="{{id}}" wx:for-index="i">
          <view class="slider-item" style="padding-left:{{SliderData.blankWidth}}px;">
            <image class="slider-img" src="{{item.avaimg}}"></image><!--图片-->
          </view>
        </block>
      </view>
    </view>
    <view class="slider-indicate-dots">
      <block wx:for="{{SliderData.indicateDots}}" wx:key="{{id}}" wx:for-index="i">
        <view class="slider-indicate-dot {{i==SliderData.curPage-1?'active':''}}">
        </view>
      </block>
    </view>
  </view>

/*自定义轮播图样式  */
.slider{
  display: block;
  position: absolute;
  top: 220rpx;
  left: 0;
  z-index: 9;
  height: 322rpx;
  overflow: hidden;
}
.slider .slider-item{
  position:relative;
  display:inline-block;
  width:100%;
  box-sizing:border-box;
  line-height: 0;
}
.slider .slider-form{
  position:relative;
  display:inline-block;
  width:100%;
  border-radius: 6px;
}
.slider .slider-img{
  border-radius: 6px;
  width:100%;
  height: 322rpx;
}
.slider .slider-item .carddetail{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
}
.slider .slider-indicate-dots{
  line-height: 0;
  z-index:9999;
  margin-top: -14px;
  padding-bottom: 8px;
  position: relative;
  text-align:center;
}
.slider .slider-indicate-dot{
  width:6px; 
  height:6px;
  background:rgba(255, 255, 255, 0.5);
  display:inline-block;
  margin-right:4px;
  border-radius:100%;
  line-height: 0;
  box-sizing: border-box;
}
.slider .button-hover{
  background: none;
  border:none;
}
.slider .slider-indicate-dot.active{
  background: white;
  width:16px;
  border-radius:4px;
}

var myslider = require('../../slider.js');
Page({
  data: {
    vipList: [{'avaimg': '../../img/banner2.png' }, {'avaimg': '../../img/banner3.png' }, {'avaimg': '../../img/banner.jpg' }, {'avaimg': '../../img/banner1.jpg' }],
    winWidth:0
  },
  onLoad: function () {
    //做兼容处理，获取屏幕宽度，防止部分手机滑动轮播图，页面跟着动
    this.setData({
      winWidth: wx.getSystemInfoSync().windowWidth
    })
    myslider.initMySlider({
      that: that,
      datas: that.data.vipList,
      autoRun: false,
      blankWidth: 26,
      newImgWidth: 18,
      interval: 1500,
      duration: 200,
      direction: 'left',
      startSlide: function (curPage) {

      },
      endSlide: function (curPage) {

      }
    });
  }
})

 上面引用的JS，来自伊人博客←点这里查看，不过他截图有的没有截完整，先看吧。

还有就是他写的滑动不是很顺畅，我优化了一下。

添加了全局变量：endPointX//用户手指触摸结束时x的坐标

在that.sliderTouchEnd中，添加endPointX = opt.changedTouches[0].clientX;//记录结束触摸点

在function slidePage(that,page)中，修改了几句

var remaingo = (perScreenX - Math.abs(lastx%perScreenX))%perScreenX;
  var remain =endPointX -  firstPointX;//判断向左还是向右
  if(remain>0){
    slideTo(that, perScreenX - remaingo);//往右
  }else{
    slideTo(that, -remaingo);//往左
  }

他的版本中，必须要滑动半屏才可以切换，有时候滑动半屏也无法切换，用触摸结束点 -触摸开始点就知道是向左还是向右滑动，这样用户滑动一小段距离就可切换了

不明白的也可以问我，或者有更好的解决办法也请告知小妹，先行告谢，丘丘：508774301