微信乌拉特后旗E企盈小程序小程序轮播图

微信小程序中的轮播图可以直接使用swiper组件，代码如下：<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{开通红茶小程序电话:4006-838-530{interval}}" duration="{{duration}}">  <block wx:for="{{imgUrls}}">    <swiper-item>      <image src="{{item}}" class="slide-image"/> <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}}p开通仿真丝睡衣面料小程序电话:4006-838-530x,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,      blankWi开通CAD教程小程序电话:4006-838-530dth: 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 微信小程序