Swiper 滑动切换

常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。

效果

使用方法

<template>
    <div id="vueSwiper">
        <lc-title title="滑动切换"></lc-title>
        <category title="横向切换"></category>
        <lc-swiper
            :paginationVisibile="true"
            direction="horizontal"
            :swiperData="dataImgItem"
        >
           <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
                <img :src="item.imgSrc"   style="width:100%; height:100%;"/> 
            </div>

        </lc-swiper>

        <category title="横向切换带指示器"></category>
        <lc-swiper
            :paginationVisibile="true"
            direction="horizontal"
            :swiperData="dataImgItem"
            :canDragging="false"
            :paginationVisible="true"
        >
             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
                <img :src="item.imgSrc"   style="width:100%; height:100%;" /> 
            </div>

        </lc-swiper>

         <category title="横向循环切换"></category>
         <lc-swiper
            :paginationVisibile="true"
            direction="horizontal"
            :swiperData="dataImgItem"
            :loop="true"
            :canDragging="false"
            :paginationVisible="true"
        >
             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
                <img :src="item.imgSrc"   style="width:100%; height:100%;" /> 
            </div>
        </lc-swiper>

         <category title="纵向自动播放"></category>
          <lc-swiper
            direction="vertical"
            :autoPlay="3000"
            :swiperData="dataImgItem"
        >
             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
                <img :src="item.imgSrc"   style="width:100%; height:100%;" /> 
            </div>
        </lc-swiper>

        <category title="滑动懒加载图片"></category>
        <lc-swiper
            direction="horizontal"
            :paginationClickable="true"
            :swiperData="dataImgItem"
            :lazyLoad="true"
             :paginationVisible="true"
             @slideChangeEnd="slideChangeEnd"
             @slideMove="slideMove"
             @slideChangeStart="slideChangeStart"
        >
             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
                <img :data-src="item.imgSrc"  style="width:100%; height:100%;" class="nut-img-lazyload"/> 
            </div>

        </lc-swiper>
    </div>

</template>
<script>
    import LcTitle from '_mods/title.vue';
    import Category from '_mods/category.vue';
    export default {
    components: { LcTitle, Category },
        data(){
            return{
                dataItem:[],
                dataImgItem:[],
            }
        },
        mounted(){
            setTimeout(()=>{
                this.dataItem = [{
                    name:1
                },{
                    name:2
                },{
                    name:3
                },{
                    name:4
                }]

                this.dataImgItem = [
                    {
                        imgSrc:'images/banner1.jpg'
                    },
                    {
                        imgSrc:'images/banner2.jpg'
                    },
                    {
                        imgSrc:'images/banner3.jpg'
                    }
                ];
                
            },300)
        },
        methods:{
            slideChangeEnd(page){
                console.log(page);
            },
            slideMove(page){
                console.log(page);
            },
            slideChangeStart(page){
                console.log(page);
            }
        }
    }
</script>
<style lang="less">
    #vueSwiper{
        .nut-swiper-slide{
            font-size:24px;
            justify-content: center;
            align-items: center;
            display: flex;
        }       
    }
</style>

可配置参数

字段	说明	类型	默认值
direction	滑动方向	String	vertical
paginationVisible	是否分页显示	Boolean	false
paginationClickable	分页是否可以点击	Boolean	false
loop	是否循环	Boolean	false
speed	过度动画执行时间	Number	500
canDragging	是否无缝切换	Boolean	true
autoPlay	自动轮播，轮播默认是循环模式，直接写轮播间隔时间	Number	0
initPage	设置初始时候显示的页	Number	1
lazyLoad	是否懒加载图片	Boolean	false
lazyLoadUrl	懒加载的默认展示图片	String	-
swiperData	异步数据渲染slide时，必须绑定对应数组	Array	-

方法

字段	说明	参数
next	去下一页	-
prev	去上一页	-
setPage	设置当前显示第几页	number

事件回调

字段	说明	回调参数
slideChangeStart	页面开始切换时候	pageSize,el
slideChangeEnd	页面结束切换时候	pageSize,el
slideRevertStart	拖动页面没改变回到原先位置开始时候	pageSize,el
slideRevertEnd	拖动页面没有改变回到原先位置结束时候	pageSize,el
slideMove	拖动过程中	offset,eler=”onEnter”

`