swiper 使用虚拟Dom

2021-09-10阅读(63)评论(0)牵着狗狗看MM

苏州实时公交查询

当数据量过多时,渲染会造成卡顿,这个时候就要用到swiper的开启虚拟Slide功能

<swiper
  :options="swiperOptions" ref="swiper"
></swiper>

 

相关配置:

swiperOptions: {
        slidesPerView: 3,
        direction: "vertical",
        ...
        virtual: {
          slides: []
        }
      }

 

从接口获取数据,并绑定

this.swiperOptions.virtual.slides = data.map(item => {//data为获取到的数据,
            return `
                <div class="middle_tr">
                  <span>${item.companyName}</span>
                  <span>${item.inSize}</span>
                  <span>${item.outSize}</span>
                </div>
              `;
          });

this.$ref.swiper.virtual.update() //一定要加上这句,不然下次请求接口后,就不会更新

 

 

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » swiper 使用虚拟Dom
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏