美文网首页
swiper动态渲染数据无法左右滑动(vue)

swiper动态渲染数据无法左右滑动(vue)

作者: gooyooi | 来源:发表于2018-04-03 19:46 被阅读0次

这个问题,真的,找了好久解决方案,终于解决成功了,

首先问题描述,
本来是用的静态数据,swiper渲染没有问题,

items: [
                   {url: '111',name:'name1'},
                   {url: '222',name:'name2'},
                   {url: '333',name:'name3'},
                   {url: '444',name:'name4'},
                   {url: '555',name:'name5'},
                   {url: '666',name:'name6'},
                   {url: '777',name:'name7'},
                   {url: '888',name:'name8'},
                   {url: '999',name:'name9'},
                   {url: '000',name:'name10'}

              ],

后期,动态获取数据:

getDeviceList () {      
    getList({}).then((res) => {                           // 获取所有设备
        this.items = res.data;                              
    }).catch((err) => {
        console.error(err);
              });
 },
const itemsLength = this.items.length;
for (let i = 0; i < itemsLength; i += 4) {         //四画面轮播
        this.pages.push(this.items.slice(i, i + 4));
}

发现this.pages始终获取不到this.items的值,swiper渲染不到任何数据,
后来经同事指导,同事说因为数据请求时异步,因此,for循环应该放在getList方法体中:

    getDeviceList () {
        getList({}).then((res) => {                           // 获取所有设备
            this.items = res.data;
            const itemsLength = this.items.length;
            for (let i = 0; i < itemsLength; i += 4) {         //四画面轮播
                this.pages.push(this.items.slice(i, i + 4));
            }           
        ).catch((err) => {
            console.error(err);
    });
  },

这样之后swiper可以渲染数据了,但是我又发现,画面不轮播了,并且也拖不动,四处寻找答案,大致分以下两种方法:
1.在获取数据之后立即对swiper初始化:

  getDeviceList () {
      getList({}).then((res) => {                           // 获取所有设备
          this.items = res.data;
          const itemsLength = this.items.length;
          for (let i = 0; i < itemsLength; i += 4) {         //四画面轮播
              this.pages.push(this.items.slice(i, i + 4));
          }
          let mySwiper = new Swiper('.swiper-container', {
                  autoplay: {
                      delay: 5000,      // 5秒切换一次
                  },
                  loop: true,    //循环
                  allowTouchMove: false, // 不允许鼠标拖动
                  preventClicks: false,//默认true               
              });
              }).catch((err) => {
                  console.error(err);
              });
          },

2.在初始化swiper的时候加上以下两行代码:

let mySwiper = new Swiper('.swiper-container', {                
     observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true,//修改swiper的父元素时,自动初始化swiper

});

亲测,第一种方法反正还是不可以滑动,第二种方法可以滑动,但是切换的时候第一条数据不显示,不知道为什么,
后来参考这个博客完美解决:

https://blog.csdn.net/zhanghuiqi205/article/details/79662586

贴上代码:

methods: {

            carousel () {                                             // swiper
                let mySwiper = new Swiper('.swiper-container', {
                    autoplay: {
                        delay: 5000,      // 5秒切换一次
                    },
                    loop: true,    //循环
                    allowTouchMove: false, // 不允许鼠标拖动
                    preventClicks: false,//默认true
                    autoplayDisableOnInteraction: false,                    
                });
                //鼠标覆盖停止自动切换
                mySwiper.el.onmouseover = function () {
                    mySwiper.autoplay.stop();
                };
                //鼠标移开开始自动切换
                mySwiper.el.onmouseout = function () {
                    mySwiper.autoplay.start();
                };
            },

            getDeviceList () {
                let that = this;
                getList({}).then((res) => {                           // 获取所有设备
                    this.items = res.data;
                    const itemsLength = this.items.length;
                    for (let i = 0; i < itemsLength; i += 4) {         //四画面轮播
                        this.pages.push(this.items.slice(i, i + 4));
                    }
                    that.$nextTick(function () {
                        that.carousel();
                    })

                }).catch((err) => {
                    console.error(err);
                });
            }
}

    mounted () {
            this.$nextTick(function () {
                this.getDeviceList();
                this.carousel();
            })
        }

刚刚接触vue,对$nextTick()函数还不了解,日后补上。

相关文章

网友评论

      本文标题:swiper动态渲染数据无法左右滑动(vue)

      本文链接:https://www.haomeiwen.com/subject/ztbchftx.html