apicloud中应用swiper可能出现失灵的情况

apiready = function() {
    new Vue({
        el:'',
        data(){
            return{

                }
        },
        methods:{
            initSwiper() {
                    var that = this;
                    fnAjax(false, 'hoplan/gethotplanlist', {}, 'application/json', 'post', false, function(ret, err) {
                        that.lunbo = ret.data.homefocusList; //轮播
                        that.hotselect = ret.data.hotplans; //热选方案
                        that.hot = ret.data.hotvebrands; //热销车型
                        Vue.nextTick(function() {
                            var swiper = new Swiper('.swiper-container', {
                                slidesPerView: 'auto',
                                centeredSlides: true,
                                spaceBetween: 30,
                                preventLinksPropagation: false,
                                loop: true,
                                on: {
                                    click: function() {
                                        // 这里有坑
                                        // 需要注意的是:this 指向的是 swpier 实例,而不是当前的 vue, 因此借助 vm,来调用 methods 里的方法
                                        // console.log(this); // -> Swiper
                                        // 当前活动块的索引,与activeIndex不同的是,在loop模式下不会将 复制的块 的数量计算在内。
                                        const realIndex = this.realIndex;
                                        that.handsss(that.lunbo[realIndex]);
                                    }
                                },
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable: true,
                                },
                            });
                        });
                    })
                },
        }
        mounted() {
           this.initSwiper();
        }
    })
}

就是这么解决的,给轮播图一个点击事件on,再次(调用vue中的方法)或者(调用自己写的方法)。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值