用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序自定义轮播--类旋转木马

Rolan 2017-12-15 00:11

swiper小程序自定义轮播;本来要做成旋转木马那样循环轮播,但是没思路了,本人才疏学浅,如果有大神看到可以指点一下。欢迎 fork 指正!!!样式展示代码:view class="show_swiper" style='width: {{winWidth}}px;h ...

swiper

小程序自定义轮播;
本来要做成旋转木马那样循环轮播,但是没思路了,本人才疏学浅,如果有大神看到可以指点一下。
欢迎 fork 指正!!!

样式展示


代码:

<view class="show_swiper" style='width: {{winWidth}}px;height: {{winHeight}}px;'>
  <view class='show_swiper_list'
        bindtouchstart='swiperTouchstart'
        bindtouchmove='swiperTouchmove'
        bindtouchend='swiperTouchend'
        style='width: {{allWidth}}px;position: relative;left: {{(winWidth-itemWidth)/2}}px;'>

    <block wx:for="{{swiperList}}">
       <view class='swiper_item' 
            data-curid="{{curIndex}}" 
            data-index='{{index}}' 
            animation="{{curIndex == index? animationToLarge : animationToSmall}}" 
            style='width: {{itemWidth}}px;height: {{itemWidth*1.4}}px;transform: scale({{curIndex == index ? 1 : scale}});-'>

          {{item}}
          
      </view>
    </block>

  </view>
</view>

主要事件;

  //触摸开始的事件
  swiperTouchstart: function (e) {
    // console.log('touchstart',e);
    let startClinetX = e.changedTouches[0].clientX;
    this.setData({
      startClinetX: startClinetX, //触摸开始位置;
      startTimestamp: e.timeStamp, //触摸开始时间;
    })
  },

  //触摸移动中的事件
  swiperTouchmove: function (e) {
    // console.log('touchmove',e);
  },

  //触摸结束事件
  swiperTouchend: function (e) {
    // console.log("触摸结束",e);

    let times = e.timeStamp - this.data.startTimestamp, //时间间隔;
        distance = e.changedTouches[0].clientX - this.data.startClinetX; //距离间隔;
    //判断
    if (times < 500 && Math.abs(distance) > 10) {
      let curIndex = this.data.curIndex;

      let x0 = this.data.itemWidth,x1 = this.data.translateDistance,x = 0;
      if ( distance > 0) {
       
        curIndex = curIndex - 1
        if(curIndex < 0){
          curIndex = 0;
          x0 = 0;
        }
        x = x1 + x0;
      } else {
      
        // console.log('+1',x);
        curIndex = curIndex + 1
        if (curIndex >= this.data.swiperList.length) {
          curIndex = this.data.swiperList.length-1;
          x0 = 0;
        }
        x = x1 - x0;
      }
      this.animationToLarge(curIndex, x);
      this.animationToSmall(curIndex, x);
      this.setData({
        curIndex: curIndex,
        translateDistance: x
      })
      
    } else {
      
    }
  },
  // 动画
  animationToLarge: function (curIndex,x) {
   
    this.animation.translateX(x).scale(1).step()
    this.setData({
      animationToLarge: this.animation.export()
    })
  },
  animationToSmall: function (curIndex,x) {

    this.animation.translateX(x).scale(0.7).step()
    this.setData({
      animationToSmall: this.animation.export()
    })
  },
鲜花
鲜花 (1)
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: sun-zw 来自: github

相关阅读

  • bee233 2018-3-12 02:04
    你好 可否分享一下源码
  • deng 2018-2-1 16:32
    这个哪个大佬能修复下
  • luoxianxu 2017-12-18 15:33
    做过一个类似的,上下滑动的卡片式,结果在安卓是体验十分不友好,加了动画后配置稍微低的会很卡,最后放弃了,还是我打开方式不对