欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

小程序自定義輪播--類旋轉(zhuǎn)木馬 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營(yíng)銷的便利，運(yùn)營(yíng)的高效，讓網(wǎng)站成為營(yíng)銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >

小程序自定義輪播--類旋轉(zhuǎn)木馬

發(fā)表時(shí)間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：36

swiper

小程序自定義輪播;
本來(lái)要做成旋轉(zhuǎn)木馬那樣循環(huán)輪播，但是沒思路了，本人才疏學(xué)淺，如果有大神看到可以指點(diǎn)一下。
歡迎 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, //觸摸開始時(shí)間；
    })
  },

  //觸摸移動(dòng)中的事件
  swiperTouchmove: function (e) {
    // console.log('touchmove',e);
  },

  //觸摸結(jié)束事件
  swiperTouchend: function (e) {
    // console.log("觸摸結(jié)束",e);

    let times = e.timeStamp - this.data.startTimestamp, //時(shí)間間隔；
        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 {
      
    }
  },
  // 動(dòng)畫
  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()
    })
  },