zoukankan      html  css  js  c++  java
  • vue项目一个页面使用多个轮播图详解

    1、html代码:

    1 <div v-for="(item,index) in arrDataList.Floor">   // 根据后台数据循环渲染多个轮播图组件
    2    <div class="swiper-container">
    3        <ul class="swiper-wrapper">
    4           <li class="swiper-slide" v-for="(goodsItem,index) in item.GoodsList">   // 单个轮播组件下循环渲染多个slide
    5                 slide
    6          </li>
    7     </ul>
    8   </div>
    9 </div>

    2、在后台接口返回数据后初始化swiper构造函数。(注意 this.$nextTick的使用)

     1 fetchData({
     2    API: "接口地址",
     3       callback: data => {
     4          this.arrDataList = data;
     5       // 在vue中,需要使用this.$nextTick,它会在数据变化以后,DOM更新以后进行回调函数,不然的话初始化轮播会无效。
     6          this.$nextTick(function () {
     7               8                  new Swiper ('.swiper-container', {
     9                         // Optional parameters
    10                     slidesPerView : 3,  // 设置slider容器能够同时显示的3个slides。
    11                     slidesPerGroup : 3, // 设置slides的数量3个为一组。
    12                     spaceBetween : 20, // 设置slide间的间距
    13                     observer:true,   // 异步情况下数据渲染完成,再次初始化轮播图
    14                     observeParents:true, // 异步情况下数据渲染完成,再次初始化轮                
    15                 });
    16 17          });
    18 });

    3、完美通关。

  • 相关阅读:
    poj 1840(五元三次方程组)
    Selenium(二)开发环境的搭建
    Selenium(一)自动化测试简介
    (二)AppScan使用教程
    (一)AppScan的安装及破解
    (一)python3.7的安装
    读完《大道至简》后的反思
    BZOJ3585: mex
    BZOJ3544: [ONTAK2010]Creative Accounting
    BZOJ3531: [Sdoi2014]旅行
  • 原文地址:https://www.cnblogs.com/hsl-shiliang/p/10576678.html
Copyright © 2011-2022 走看看