怎么打印出小程序swiper的current

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

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

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

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

<template>

    <div class="live-lottery-notice" v-show="logListlength > 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/swipercss'

import Swiper from 'swiper';

export default {

    props: ['logList'],

    data() {

        return {

            mySwiper: null

        }

    },

    mounted() {

        thisinitSwiper()

    },

    methods: {

        initSwiper() {

            this$nextTick(()=> {

                setTimeout(()=>{

                    thismySwiper = 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>

<div class="swiper-container">--首先定义一个容器

<div class="swiper-wrapper">

<div class="swiper-slide"><img src="" /></div> --添加

<div class="swiper-slide"><img src="" /></div>

<div class="swiper-slide"><img src="" /></div>

</div>

<div class="swiper-pagination"></div>--小圆点分页器

<div class="swiper-button-prev"></div>--上一页

<div class="swiper-button-next"></div>--下一页

</div>

复制代码

如果想让它动起来，那就继续来写js吧

复制代码

var mySwiper = new Swiper("swiper-container",{

autoplay:1000,--每秒中轮播一次

loop:true,--可以让循环轮播

autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播

pagination:"swiper-pagination",--让小圆点显示

paginationClickable:true,--实现小圆点点击

prevButton:"swiper-button-prev",--实现上一页的点击

nextButton:"swiper-button-next",--实现下一页的点击

effect:"flip"--可以实现3D效果的轮播

})

复制代码

Swiper轮播的也有它的好处：

1Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

2Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

3Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

同时也有不足之处：(使用Swiper轮播插件ajax请求加载时，无法滑动的问题)

因为banner图是动态创建的，在插件开始初始化时，文档流中没用，所以没有创建相应宽度，通过调整js加载顺序，问题还是没有解决。

最后找到swiper插件 api 有属性是可以根据内容变动，自动初始化插件的，添加observer：true后问题解决！

var mySwiper = new Swiper ('swiper-container', {

pagination: 'swiper-pagination',

autoplay: 5000,

loop: true,

observer:true,//修改swiper自己或子元素时，自动初始化swiper

observeParents:true,//修改swiper的父元素时，自动初始化swiper

})

Swiper拥有丰富的API接口。（不过关于中文文档不多，没找着。）能够让开发者生成个人独有的分页器（pagination），上下滑块的按钮

以及4个回调函数：1onTouchStart

2onTouchMove

3onTouchEnd

4onSlideSwitch。

以上内容是我个人总结，希望对各位有所帮助！

以上就是关于怎么打印出小程序swiper的current全部的内容，包括:怎么打印出小程序swiper的current、如何在vue中引入第三方jquery，swiper等库、swiper刷新加载各种问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！