swiper实现竖直方向滚动字幕

垂直方向的滚动在开发过程中遇到的问题主要有2个，一个是移动端无法滚动，一个是每次数据循环完成之后sweiper都从第一条数据开始导致字幕快速滚动之后才正常滚动，原因是没有设置循环滚动

解决：移动端添加属性 observer: true,  observeParents: true, 对数据进行监听

添加 loop : true属性解决每次都从头开始滚动，之前添加过这个属性没好使后来又可以了

注意：swiper-wrapper不能添加overflow:scroll样式，不然会导致swiper-no-swiping无效

<template>

    <div class="live-lottery-notice" v-show="logList.length > 0">

        <div class="swiper-container swiper-no-swiping">

            <div class="swiper-wrapper">

                <div class="swiper-slide" v-for="(item, index) in logList" :key="index">XXX</div>

            </div>

        </div>

    </div>

</template>

<script>

import 'swiper/dist/css/swiper.css'

import Swiper from 'swiper'

export default {

    props: 樱雹['logList'],

    data() {

        return {

            mySwiper: null

        }

    },

    mounted() {

        this.initSwiper()

    },

    methods: {

        initSwiper() {

            this.$nextTick(()=> {

           脊早帆     setTimeout(()=>{

                    this.mySwiper = new Swiper('.swiper-container', {

                        initialSlide :0,

                        slidesPerView :'auto',

                        autoplay: {// 自动滑动

                            stopOnLastSlide: false,

                            delay: 5000, //5秒切换一次

                            disableOnInteraction: false

                        },

                        direction:'vertical',

                        grabCursor:true,

                        autoplayDisableOnInteraction:false,

                  睁棚      // mousewheelControl:true,

                        autoHeight:true,

                        observer: true,

                        observeParents: true, 

                        speed:1000,

                        loop : true

                    })

                },500)

            })

        }

    }

}

</script>

<style lang="scss" scoped>

.live-lottery-notice {

    width: 100%

    height: auto

}

</style>

1.使用方法

<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在微信开发者工具无法滑动：

利用swiper组件来实现。

微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。

1.打开微信进入后，选择需要设置的微信群聊，点击右上角三个点的图标。

2.点击“群公告”进入。

3.在空白位置输入公告的文字内容，点击“完成”。

4.随后出现对话框，点击“发布”。

5.回到微信群内，就会出现公告文字内容仔顷，同时这段文字左下角出现升世灰色字“设为群待办”。

6.点击“设为群待办”，这样群内成员吵戚肢点击查看才算完成。

---