支付宝小程序Swiper 滚动图 带圆点和跳转方式

<!-- 滚动图 -->

<view class="swiper" style="position:relative">

<swiper autoplay="{{true}}" circular="{{true}}" onChange="currentHandle">

        <block a:for="{{swiperList}}">

          <swiper-item class="swiper-box">

            <view class="swiper-item" style="width:100%height:300rpx">

                <!-- lazy-load根据需要 onTap可以点击图片跳转 data-url绑定到跳转的链接-->

              <image lazy-load="{{true}}" mode="scaleToFill" src="{{item.image}}" style="display:flexwidth:100%height:300rpx"

                onTap="swiper" data-url="{{item.url}}" data-index='{{index}}' />

            </view>

          </swiper-item>

        </block>

      </swiper>

    <!-- 圆点 -->

      <view class="swiper_dot">

        <view class="trans MR10 {{current === index ?'active': ''}}" a:for="{{swiperList}}" a:key="{{index}}"></view>

      </view>

</view>

```

```

data(){

    swiperList:[

        {

            image:'',//图片的路径

            url:""//要跳转的路径

        },

                {

            image:'',

            url:""

        }

    ],

    current: 0,//初始化dot

},

//监听current

currentHandle(e) {

console.log(e)

    //改变current的值

    let { current } = e.detail

    this.setData({

      current

    })

},

```

```

.swiper-box {

  padding: 0 30rpx

}

.swiper-item {

  border-radius: 10rpx

  overflow: hidden

}

.swiper_dot {

  display: flex

  flex: 1

  justify-content: center

  position: absolute

  bottom: 16rpx

  left: 42%//通过绝对定位 在滚动图的正下方 具体看自己

}

.MR10 {

  margin-right: 10rpx

}

.trans {

  width: 23rpx

  height: 8rpx

  background-color: #ffffff70

  border-radius: 3.5rpx

  transition: width 0.5s linear

}

.active {

  background-color: #ffffffd7

  width: 67rpx

  transition: width 0.5s linear

}

```

---转自我的自个的

支付宝小程序Swiper 滚动图 带圆点和跳转方式_多甘范科夫斯基的博客-CSDN博客

<template>

  <Swiper

    :options="swiperOption"

    :style="{ height: setHeight }"

    @slideChange="onSlideChange"

  >

    <SwiperSlide class="slide">page1</SwiperSlide>

    <SwiperSlide class="slide">page2</SwiperSlide>

    <SwiperSlide class="slide">page3</SwiperSlide>

  </Swiper>

</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'

export default {

  components: {

    Swiper: swiper,

    SwiperSlide: swiperSlide,

  },

  data() {

    let vm = this

    return {

      swiperOption: {

        direction: 'vertical',

        initialSlide: 0,

        on: {

          init() {

            vm.$swiper = this

          },

        },

      },

      setHeight:

        document.documentElement.clientHeight || document.body.clientHeight,

    }

  },

  created() {

    this.setHeight =

      document.documentElement.clientHeight || document.body.clientHeight

    this.handlerSwiper()

  },

  methods: {

    onSlideChange() {

      let pageIndex = this.$swiper.activeIndex

      switch (pageIndex) {

        case 0:

          // ...

          break

        case 1:

          // ...

          break

        case 2:

          // ...

          break

      }

    },

    handlerSwiper() {

      let startScroll, touchStart, touchCurrent

      this.$nextTick(() => {

        this.$swiper.slides.on(

          'touchstart',

          function (e) {

            startScroll = Math.floor(this.scrollTop) // 针对安卓获取到小数进行向下取整

            touchStart = e.targetTouches[0].pageY

          },

          true,

        )

        this.$swiper.slides.on(

          'touchmove',

          function (e) {

            touchCurrent = e.targetTouches[0].pageY

            let touchesDiff = touchCurrent - touchStart

            let slide = this

            let onlyScrolling =

              slide.scrollHeight > slide.offsetHeight && //allow only when slide is scrollable

              ((touchesDiff < 0 && startScroll === 0) || //start from top edge to scroll bottom

                (touchesDiff > 0 &&

                  startScroll === slide.scrollHeight - slide.offsetHeight) || //start from bottom edge to scroll top

                (startScroll > 0 &&

                  startScroll < slide.scrollHeight - slide.offsetHeight)) //start from the middle

            if (onlyScrolling) {

              e.stopPropagation()

            }

          },

          true,

        )

      })

    },

  },

}

</script>

<style scoped>

body {

  overflow: hidden

}

.swiper-container {

  width: 100%

}

.swiper-slide {

  overflow: scroll

  background: #00f

  height: 1000px /* 高度由内容填充后删掉 */

}

</style>

2.解决swiper在微信开发者工具无法滑动：