vue-slick使用中的问题

1、git地址

    https://github.com/staskjs/vue-slick
      $ npm install vue-slick

2、使用配置

 vue-slick 插件配置说明
 http://www.manongjc.com/detail/7-ypjhqfreqkgoieg.html

3、引入

 <div class="pure-list"
                     v-if="rightlist.length >0">

                    <slick ref="slickone"
                           :options="slickOptions">
                        <div class="pure-hotlist"
                             v-for="(item,index) in rightlist"
                             :key="index">
                          
                        </div>
                    </slick>
                </div>
 
    import Slick from 'vue-slick';
    components: {
        'slick': Slick,
    },

      data() {
        return {

slickOptions: {
                slidesToShow: 6,//显示个数
                slidesToScroll: 1,//一次轮播个数
                autoplay: true,//自动播放
                autoplaySpeed: 3000,//播放间隔
                vertical: true,//垂直播放
                arrows: false,//箭头
                //infinite:true,//循环播放
                //prevArrow: "<button type='button' class=' slick-prevArrow slick-next slick-arrow'>上一篇</button>",
                //nextArrow: "<button type='button' class=' slick-prevArrow slick-next slick-arrow'>下一篇</button>",
            },
        };

• ps1：ref具有命名唯一性 :options应尽量也遵循该规则

• ps2： 如上例rightlist数组是后台请求的，初始化为空 所以刚刚开始渲染时就会出现轮播一次停止的情况，所以在外层div处理时，判断rightlist长度大于0才进行渲染解决此问题

• ps3： 若用到prevArrow 箭头，自定义 class 名称slick-prevArrow也要具有命名唯一性 不能与其他slickOptions内相同 不然也会出现错误

                                                                                                 每天都要努力一点 ！