伊人博客 一款有技术又有生活的博客

【自定义轮播图】微信小程序自定义轮播图无缝滚动

发布时间:2018-03-25 10:31:49 标签:小程序开发 | 阅读(550)

S80325-17194648 00_00_00-00_00_10~1.gif

微信小程序中的轮播图可以直接使用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>

但是为了实现上图的效果,中间一张图片,然后两遍的图片都能显示出来一点点,并且两张图片中间有空隙,于是开始自定义一个轮播图组件。起名就叫做自定义轮播图吧。

为了方便后期使用,起初设计多个参数可调:

1、自动滚动开关

2、滚动一屏所需要的时间

3、两次滚动事件的时间间隔

4、两张图片中间空隙宽度

5、左右两边新突出图片的宽度

6、开始滚动回调事件

7、滚动结束回调事件

8、数据数组,比如图片数组

####################################################

开始操作,首先需要在页面上防止wxml代码:

<view class='yxxrui-slider'>
  <view style='overflow:hidden;'>
    <view bindtouchcancel="sliderTouchCancel" bindtouchstart='sliderTouchStart'
           bindtouchend='sliderTouchEnd' bindtouchmove='sliderTouchMove’
           style='width:{{yxxruiSliderData.totalWidth}}px;display:flex;
            transform:translate({{yxxruiSliderData.x}}px,0)'>
      <block wx:for="{{yxxruiSliderData.datas}}" wx:for-index="i">
        <view class="slider-item"
        style="padding-left:{{yxxruiSliderData.blankWidth}}px;">
        <!--form和button只是为了后台获取formid使用,可有可无,依照自己的设计即可-->
          <form class="slider-form">
          <button>
          <image class="slider-img" src="{{item}}"/>
          </button>
          </form>
        </view>
      </block>
    </view>
  </view>
  <view class="slider-indicate-dots">
    <block wx:for="{{yxxruiSliderData.indicateDots}}" wx:for-index="i">
      <view class="slider-indicate-dot {{i==yxxruiSliderData.curPage-1?'active':''}}">
            </view>
    </block>
  </view>
</view>

############################################

写好页面元素之后,将下边的wxss样式写进去:

/*自定义轮播图样式  */
.yxxrui-slider{
  display: block;
}
.yxxrui-slider .slider-item{
  position:relative;
  display:inline-block;
  width:100%;
  box-sizing:border-box;
  overflow: hidden;
  line-height: 0;
}
.yxxrui-slider .slider-form{
  position:relative;
  display:inline-block;
  width:100%;
}
.yxxrui-slider .slider-img{
  border-radius: 14px;
  width:100%;
  height: 180px;
}
.yxxrui-slider .slider-item button{
  line-height: 0;
  box-sizing: border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  padding-left: 0;
  padding-right: 0;
}
.yxxrui-slider .slider-indicate-dots{
  line-height: 0;
  z-index:9999;
  margin-top: -14px;
  padding-bottom: 8px;
  position: relative;
  text-align:center;
}
.yxxrui-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;
}
.yxxrui-slider .button-hover{
  background: none;
}
.yxxrui-slider .slider-indicate-dot.active{
  background: white;
  width:16px;
  border-radius:4px;
}

################################################

然后写js代码调用,当前页面的js文件需要先引入:

var myslider = require('../../utils/yxxrui.slider.js');
//调用方法如下:
myslider.initMySlider({
  that:this,
  datas: [
    '../../img/1.jpg',
    '../../img/2.jpg',
    '../../img/3.jpg',
    '../../img/4.jpg'
  ],
  autoRun:true,
  blankWidth : 12,
  newImgWidth: 18,
  interval:3000,
  duration:200,
  direction:'left',
  startSlide:function(curPage){
  },
  endSlide: function (curPage){
  }
});

其中的yxxrui.slider.js代码放到下一个博客中,点这里直达

原创文章如转载,请注明出处“伊人博客

站内搜索
关注公众号(随时搜索)
文章归档
热门推荐
随机推荐
冷门晾晒