KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #dsh #dsh-plugin #ai-agent #claude-code #codex #typescript #ai-agents #mcp #cli #rust #deepseek-harness

swiper

★ 28 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# swiper

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

样式展示

![](https://github.com/sun-zw/swiper/blob/master/images/IMG_20171214_100734.png)
 
![](https://github.com/sun-zw/swiper/blob/master/images/IMG_20171214_100809.png)

代码：
```html
<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;'>

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

</view>
</view>

```

主要事件；
```javascript

//触摸开始的事件
  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;

this.animation.translateX(x).scale(0.7).step()
    this.setData({
      animationToSmall: this.animation.export()
    })
  },

```

swiper

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README