前言

轮播组件是在移动端很常用的一种组件，而swiper (opens new window)、vue-awesome-swiper (opens new window)（123KB）组件基本是大家的首选。鉴于现在对移动端性能的要求越来越高，而这两个组件功能较全、体积较大，很多功能可能根本用不到，故封装了 只适用于移动端、只支持水平方向滑动（可扩展支持垂直方向） 的 OcSwiper 组件，本组件源码大小15KB，打包后大小约10KB，gzip后大小约4KB。

Swiper轮播实现功能

轮播组件，支持循环、分页、自动轮播等（目前仅支持水平方向轮播）。

演示

提示

触摸滑动只支持在移动端设备进行演示，如需在PC端使用，可自行修改组件源码，将移动端touch事件替换为mouse事件。

1

2

3

4

安装

全局引入

import { OcSwiper  } from 'OcSwiper'
Vue.use(OcSwiper)

按需引入

import { OcSwiper } from 'OcSwiper'
export default {
  components: {
    OcSwiper,
  }
}

基础用法

<oc-swiper ref="swiper"
  :pagination="true"
  :autoplayTime="3000"
  :loop="true"
  minMoveDistance="20%"
  @slideChangeTransitionStart="slideChangeTransitionStart"
  @slideChangeTransitionEnd="slideChangeTransitionEnd"
  @onTouchStart="onTouchStart"
  @onTouchStart="onTouchStart"
  @onTouchEnd="onTouchEnd"
  v-model="index">
    <div class="oc-swiper-item" v-for="(item, idx) in list" :key="idx" @click="slideClick(item, idx)">
      <div class="slide-item">{{ item }}</div>
    </div>

    <!-- 自定义分页展示：slot="pagination" -->
    <!-- 样式一：1 2 3 4 -->
    <div slot="pagination">
      <ul>
        <li v-for="page in list.length" :key="page" :class="{'cur-page': index === (page - 1)}">
          {{ page }}
        </li>
      </ul>
    </div>
    <!-- 样式二：1/4 -->
    <div slot="pagination">
      <div>{{ index + 1 }} / {{ list.length }}</div>
    </div>
</oc-swiper>

方法

mySwiper.reset() 重置swiper组件。常用于window.onresize和swiper数据异步更新，如：

// 窗口大小改变
window.onresize = () => {
  this.$refs.swiper.reset()
}

// 列表数据更新
this.list = ['a', 'b', 'c', 'd']
this.$nextTick(() => {
  // 接口异步获取到列表数据后，重置swiper组件
  this.$refs.swiper.reset()
})

配置参数

参数	说明	类型	默认值	说明
v-model	绑定值	Number	0	当前slide索引，从0开始
pagination	是否显示分页器	Boolean	true	默认显示分页器
autoplayTime	自动轮播时间间隔	Number	2500	0-不开启自动轮播，>0开启自动轮播，数值表示时间间隔
loop	是否循环	Boolean	true	默认开启循环
minMoveDistance	最小滑动距离	String	20%	成功触发切换 item 的最小滑动距离。支持格式: 20(20px)/20px/20%
quickTouchTime	快速滑动	Number	150	单位（ms）。快速滑动时，只要距离大于 10px 便可以触发滑动
speed	切换动画时间	Number	300	单位（ms）
isPreventDefault	是否在滑动时禁用浏览器默认行为	Boolean	true	默认禁用。

模版调用的回调方法

方法名	说明	回调参数	备注
slideChangeTransitionStart	swiper从当前slide开始过渡到另一个slide时执行	realIndex，切换后slide索引
slideChangeTransitionEnd	swiper从一个slide过渡到另一个slide结束时执行	realIndex，切换后slide索引
onTouchStart	touchStart，碰触到组件时执行	-
onTouchMove	touchMove	(event, direction) event：可用于禁用浏览器默认操作。 direction：方向（horizontal：水平方向 vertical：垂直方向）。
onTouchEnd	touchEnd，触摸释放时执行	-

模版插槽

名字	说明
默认插槽	swiper组件内容展示。格式： <div class="oc-swiper-item"><div>swiper slide</div></div>
pagination	自定义分页样式展示

源码

点击查看 OcSwiper.vue 组件源码

<template>
  <div
    class="oc-swiper"
    @touchstart="handleTouchstart"
    @touchmove="handleTouchmove"
    @touchend="handleTouchend"
    @touchcancel="handleTouchend"
  >
    <div ref="wrapper" class="oc-swiper-wrapper">
      <slot></slot>
    </div>
    <div v-if="pagination" class="oc-swiper-pagination">
      <!-- 自定义分页器展示 -->
      <slot name="pagination">
        <div class="oc-swiper-pagination-bar">
          <i
            v-for="item in length"
            :key="item"
            :class="[
              'oc-swiper-pagination-item',
              item - 1 === realIndex ? 'active' : '',
            ]"
          ></i>
        </div>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "OcSwiper",
  props: {
    value: {
      // 默认展示第N个，N从0开始
      type: Number,
      default: 0,
    },
    pagination: {
      // 默认分页导航器
      type: Boolean,
      default: true,
    },
    autoplayTime: {
      // 自动轮播时间间隔
      type: Number,
      default: 2500,
    },
    loop: {
      // 循环滑动
      type: Boolean,
      default: true,
    },
    minMoveDistance: {
      // 成功触发切换 item 的最小滑动距离。支持格式: 20(20px)/20px/20%
      type: String,
      default: "20%",
    },
    quickTouchTime: {
      // 快速滑动时只要距离大于 10px 便可以触发滑动
      type: Number,
      default: 150,
    },
    speed: {
      // 切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
      type: Number,
      default: 300,
    },
    isPreventDefault: {
      // 是否在滑动时禁用浏览器默认行为。默认为true表示禁用
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      width: 0, // 组件宽度
      hasMounted: false,
      realIndex: this.value, // 当前活动块的索引，从0开始
      isRealIndexChange: false, // 滑动后当前活动块的索引是否改变
      pages: [], // swiperSlide dom list
      length: 0,
      touchStartTime: 0, // 滑动开始时间
      startx: 0, // 滑动开始位置X
      starty: 0, // 滑动开始位置Y
      moveDistance: 0, // 滑动距离
      animating: false, // 组件正在过渡（自由滑动）
      isTouching: true, // 用户正在操作（touch事件未结束）
      horizontalMove: true,
      copyNum: 1, // 复制数量
      autoplayTimer: null,
    };
  },
  computed: {
    ocMinMoveDistance() {
      let value = this.minMoveDistance;
      let mode = "";
      if (/px$/.test(value)) {
        mode = "pixel";
      } else if (/^\d+$/.test(value)) {
        mode = "pixel";
      } else if (/%$/.test(value)) {
        mode = "percent";
      } else {
        value = "20%";
        mode = "percent";
      }
      const stgy = {
        pixel() {
          const parsedValue = parseInt(value, 10);
          return `${value}px`;
        },
        percent() {
          const parsedValue = parseInt(value, 10) / 100;
          return this.width * parsedValue;
        },
      };
      return stgy[mode].apply(this);
    },
    // 滑动结束后 translatex 的值
    ocTranslatex() {
      return -this.width * this.realIndex;
    },
    ocIsEnd() {
      return this.realIndex === this.length - 1;
    },
    ocIsBegin() {
      return this.realIndex === 0;
    },
  },
  watch: {
    realIndex(val) {
      if (val !== this.value) {
        this.$emit("input", val);
      }
      this.valueChangeHandler(val);
    },
    value(val) {
      const realIndex = this.realIndex;
      const length = this.pages.length;
      if (val >= length) {
        val = realIndex;
        this.$emit("input", val);
      }
      this.realIndex = val;
    },
    autoplayTime() {
      this.autoChange();
    },
  },
  mounted() {
    this.hasMounted = true;
    this.init();
    this.initOnce();
  },
  destroyed() {
    this.autoplayTimer && clearTimeout(this.autoplayTimer);
  },
  methods: {
    reset() {
      this.init();
      this.initOnce();
    },
    init() {
      // 如果组件 mounted 前 init 方法被调用，则会引起报错。
      // 因此使用 hasMounted 变量来保证不会报错。
      if (!this.hasMounted) return;
      // 设置部分 datas 的值
      const success = this.initDatas();
      if (!success) {
        // Failed to init datas
        return;
      }
      // 为 wrapper 定宽
      this.$refs.wrapper.style.width = `${this.width}px`;
      // 复制首尾 dom
      this.clearCopies();
      this.addCopies();
      // 自动轮播
      if (this.autoplayTime > 0) {
        this.autoChange();
      }
    },
    initOnce() {
      this.setTranslate(this.ocTranslatex);
    },
    initDatas() {
      const style = getComputedStyle(this.$el, false).width;
      this.width = parseInt(style, 10);
      if (!this.$slots.default) {
        // console.warn('No child nodes in swipe component', this.$el);
        return false;
      }
      this.pages = this.$slots.default
        .filter(
          (vnode) => vnode.tag && vnode.elm.classList.contains("oc-swiper-item")
        )
        .map((vnode) => vnode.elm);
      if (!this.pages.length) {
        // console.warn('The swipe component not contained swipe-item component', this.$el);
        return false;
      }
      this.length = this.pages.length;
      return true;
    },
    // 清除复制的首尾dom
    clearCopies() {
      const children = this.$refs.wrapper.querySelectorAll(
        ".oc-swiper-item-copy"
      );
      [...children].forEach((el) => {
        this.$refs.wrapper.removeChild(el);
      }, this);
      this.$refs.wrapper.style.marginLeft = "0";
    },
    // 复制首尾dom
    addCopies() {
      // if(!this.loop) return
      const fronts = [];
      const ends = [];
      const pages = this.pages;
      // 只有一个或不需要循环时时不复制
      if (!this.loop || pages.length < 2) return;
      // copy 第一个和最后一个元素
      pages.forEach((item, index) => {
        if (index === 0) {
          const copy = item.cloneNode(true);
          copy.classList.remove("oc-swiper-item");
          copy.classList.add("oc-swiper-item-copy");
          fronts.push(copy);
        }
        if (index === pages.length - 1) {
          const copy = item.cloneNode(true);
          copy.classList.remove("oc-swiper-item");
          copy.classList.add("oc-swiper-item-copy");
          ends.push(copy);
        }
      }, this);
      this.copyNum = ends.length;
      // insert node
      while (ends.length) {
        const item = ends.shift();
        const firstNode = this.$refs.wrapper.querySelector(".oc-swiper-item");
        this.$refs.wrapper.insertBefore(item, firstNode);
      }
      while (fronts.length) {
        const item = fronts.shift();
        this.$refs.wrapper.appendChild(item);
      }
      this.$refs.wrapper.style.marginLeft = `-${this.width * this.copyNum}px`;
    },
    handleTouchstart(e) {
      this.$emit("onTouchStart");
      if (this.length <= 1 || this.animating) return;
      this.startx = e.touches[0].pageX;
      this.starty = e.touches[0].pageY;
      this.touchStartTime = new Date().getTime();
      // 滑动开始时，清除自动轮播的计时器
      this.autoplayTimer && clearTimeout(this.autoplayTimer);
      // if (this.autoChange) {
      // 	this.autoChange();  // 重置自动轮播的计时器
      // }
      this.isTouching = true;
    },
    handleTouchmove(e) {
      // if (this.length <= 1 || this.animating) return;
      if (this.length <= 1) return;
      if (this.animating) {
        e.preventDefault();
        return;
      }
      if (this.isPreventDefault) {
        e.preventDefault();
      }
      let moveDistance = e.touches[0].pageX - this.startx;
      this.moveDistance = moveDistance;
      // 判断用户是横向滑动还是纵向滑动，以此来避免误滑
      if (this.isTouching) {
        this.isTouching = false;
        const moveY = e.touches[0].pageY - this.starty;
        this.horizontalMove = Math.abs(moveDistance) >= Math.abs(moveY);
      }
      // 用户非水平滑动屏幕
      if (!this.horizontalMove) {
        this.$emit("onTouchMove", e, "vertical");
        return;
      }
      this.$emit("onTouchMove", e, "horizontal");
      const translate = this.ocTranslatex + moveDistance;
      // 正常触摸应该移动的距离
      let finalTranslate = translate;
      // 考虑 loop 的取值时
      if (!this.loop) {
        const leftBoundary = 0;
        const rightBoundary = -this.width * (this.length - 1);
        if (translate > leftBoundary) {
          // 左边界
          finalTranslate = leftBoundary;
        } else if (translate < rightBoundary) {
          // 右边界
          finalTranslate = rightBoundary;
        }
      }
      this.setTranslate(finalTranslate);
    },
    handleTouchend(e) {
      this.$emit("onTouchEnd");
      if (this.length <= 1 || this.animating) return;
      if (!this.horizontalMove) return;
      const isQuick =
        new Date().getTime() - this.touchStartTime < this.quickTouchTime;
      if (this.loop) {
        // 如果是 loop 的话，有很多地方需要特殊处理
        this.handleTouchend_loop(this.cartChange(this.moveDistance, isQuick));
      } else {
        // 根据轮播图滑动的方向来改变 realIndex
        this.updateInsideValue(this.cartChange(this.moveDistance, isQuick));
      }
      // reset some data
      this.moveDistance = 0;
      // 滑动结束，开启自动轮播
      this.autoChange();
    },
    // 考虑 this.loop 的取值对 translate 的影响
    handleTouchend_loop(deviation) {
      if (!this.loop) return;
      const newValue = this.realIndex + deviation;
      // left boundary
      if (this.realIndex === 0 && newValue < this.realIndex) {
        this.setTranslate(-this.width * this.length + this.moveDistance);
        setTimeout(() => {
          this.updateInsideValue(deviation);
        }, 40);
        return;
      }
      // right boundary
      if (this.realIndex === this.length - 1 && newValue > this.realIndex) {
        this.setTranslate(this.width + this.moveDistance);
        setTimeout(() => {
          this.updateInsideValue(deviation);
        }, 40);
        return;
      }
      this.updateInsideValue(deviation);
    },
    /**
     *  根据传入的差值来正确的更新 realIndex
     *  @param  {number} deviation value 改变的差值
     */
    updateInsideValue(deviation) {
      // 因为滑动后如果没有翻页成功，是无法改变 realIndex 的值的，所以需要手动触发 handler
      if (deviation === 0) {
        this.isRealIndexChange = false;
        this.valueChangeHandler(deviation);
        return;
      }
      // 新的 insidevalue 值应该是现在 realIndex 的值 和 改变的差值的和
      const newValue = this.realIndex + deviation;
      this.isRealIndexChange = true;
      // 按顺序查看是否满足处理数据的要求，如果不满足则交给下一个函数处理
      const chain = this.chain(
        // 是否是 loop
        this.updateInsideValue_loop,
        // 什么特殊的设置都没有
        this.updateInsideValue_normal,
        // 通过更新 realIndex 来触发 valueChangeHandler
        (newValue) => {
          this.realIndex = newValue;
        }
      );
      chain(newValue);
    },
    // 当考虑到 loop 的情况时
    updateInsideValue_loop(newValue) {
      if (!this.loop) return false;
      this.isRealIndexChange = true;
      if (newValue < 0) {
        this.realIndex = this.length - 1;
        return "done";
      }
      if (newValue > this.length - 1) {
        this.realIndex = 0;
        return "done";
      }
      return false;
    },
    // 普通状态下， loop === false
    updateInsideValue_normal(newValue) {
      if (newValue < 0) {
        this.realIndex = 0;
        this.isRealIndexChange = false;
        // 因为这时候 realIndex 的值其实没变，所以需要手动触发 valueChangeHandler
        this.valueChangeHandler(0);
        return "done";
      }
      if (newValue > this.length - 1) {
        this.realIndex = this.length - 1;
        this.isRealIndexChange = false;
        // 因为这时候 realIndex 的值其实没变，所以需要手动触发 valueChangeHandler
        this.valueChangeHandler(this.length - 1);
        return "done";
      }
      this.isRealIndexChange = true;
      return false;
    },
    cartChange(moveDistance, quick) {
      const absMove = Math.abs(moveDistance);
      const absMin = Math.abs(this.ocMinMoveDistance);
      // 策略组
      const strategies = {
        // 普通滑动
        normal() {
          if (absMove < absMin) return 0;
          if (moveDistance > 0) return -1;
          if (moveDistance < 0) return 1;
          return 0;
        },
        // 快速滑动
        quick() {
          if (absMove < 10) return 0;
          if (moveDistance > 0) return -1;
          if (moveDistance < 0) return 1;
          return 0;
        },
      };
      let stgy = "normal";
      // 当前策略
      switch (true) {
        case quick === true:
          stgy = "quick";
          break;
        default:
          stgy = "normal";
          break;
      }
      return strategies[stgy].apply(this);
    },
    valueChangeHandler(value) {
      // 添加过渡效果
      this.duration();
      this.setTranslate(this.ocTranslatex);
    },
    // 自动轮播
    autoChange() {
      this.autoplayTimer && clearTimeout(this.autoplayTimer);
      const timer = () => {
        if (
          typeof this.autoplayTime !== "number" ||
          this.autoplayTime <= 0 ||
          this.length <= 1
        )
          return;
        this.autoplayTimer = setTimeout(() => {
          this.autoChangeHandler();
          timer();
        }, this.autoplayTime);
      };
      timer();
    },
    autoChangeHandler() {
      this.isRealIndexChange = true;
      // 如果是右边界，则先移动到左边被 copy 的相同的元素
      if (this.ocIsEnd) {
        this.setTranslate(this.width);
      }
      // 如果不延迟 40 ms 的话，在 setTranslate 的时候，就会触发 transition 效果，这是不想要的。
      setTimeout(() => {
        this.realIndex =
          this.realIndex < this.length - 1 ? this.realIndex + 1 : 0;
      }, 40);
    },
    /**
     *  惰性函数，设置 dom 的 translate 值
     *  @param  {dom}            el       进行变换的元素
     *  @param  {number|string}  trans    进行变换的值
     */
    setTranslate(d) {
      let transform = `translate3d(${d}px, 0, 0)`;
      this.$refs.wrapper.style.webkitTransform = transform;
      this.$refs.wrapper.style.transform = transform;
    },
    /**
     *  添加和删除过渡效果
     *  @param  {Array} args 需要添加过渡动画的元素数组
     */
    duration() {
      this.animating = true;
      // 回调函数，swiper从当前slide开始过渡到另一个slide时执行。
      if (this.isRealIndexChange) {
        this.$emit("slideChangeTransitionStart", this.realIndex);
      }
      const el = this.$refs.wrapper;
      const speed = this.speed;
      el.style.webkitTransitionDuration = `${speed}ms`;
      el.style.transitionDuration = `${speed}ms`;
      el.style.webkitTransitionTimingFunction = "ease-out";
      el.style.transitionTimingFunction = "ease-out";
      // 添加过渡效果
      this.durationTimer && clearTimeout(this.durationTimer);
      this.durationTimer = setTimeout(() => {
        el.style.transitionDuration = "";
        el.style.webkitTransitionDuration = "";
        this.animating = false;
        // 回调函数，swiper从一个slide过渡到另一个slide结束时执行。
        if (this.isRealIndexChange) {
          this.$emit("slideChangeTransitionEnd", this.realIndex);
        }
      }, speed);
    },
    // 职责链，函数 return false 则终止传递
    chain(...fns) {
      return (...args) => {
        for (let index = 0; index < fns.length; index += 1) {
          const result = fns[index](...args);
          if (result === "done") break;
        }
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.oc-swiper {
  overflow: hidden;
}
.oc-swiper-wrapper {
  height: 100%;
  display: flex;
  flex-direction: row;
}
.oc-swiper-item,
.oc-swiper-item-copy {
  width: 100%;
  height: 100%;
  flex: none;
}
.oc-swiper-pagination {
  position: relative;
  height: 0;
}
.oc-swiper-pagination-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.oc-swiper-pagination-item {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: rgba(#fff, 0.6);
  margin: 0 4px;
  transition: all 0.1s;
  &.active {
    width: 8px;
    background-color: #fff;
  }
}
</style>

点击查看 DEMO 源码

<template>
  <div class="demo-swiper-page">
    <section class="demo">
      <oc-swiper
        ref="swiper"
        :autoplayTime="autoplayTime"
        :loop="loop"
        :minMoveDistance="minMoveDistance"
        :pagination="pagination"
        :isPreventDefault="false"
        @slideChangeTransitionStart="slideChangeTransitionStart"
        @slideChangeTransitionEnd="slideChangeTransitionEnd"
        @onTouchStart="onTouchStart"
        @onTouchMove="onTouchMove"
        @onTouchEnd="onTouchEnd"
        v-model="index"
      >
        <div
          class="oc-swiper-item"
          v-for="(item, idx) in list"
          :key="idx"
          @click="slideClick(item, idx)"
        >
          <div class="slide-item">{{ item }}</div>
        </div>
        <div v-if="userPagination" class="user-pagination" slot="pagination">
          <ul v-if="isPageStyle1">
            <li
              v-for="page in list.length"
              :key="page"
              :class="{ 'cur-page': index === page - 1 }"
              @click="index = page - 1"
            >
              {{ page }}
            </li>
          </ul>
          <div v-else class="page-2">{{ index + 1 }} / {{ list.length }}</div>
        </div>
      </oc-swiper>
    </section>
    <button class="g-btn" @click="update">更新数据</button>
    <button class="g-btn" @click="add">增加一条数据</button>
    <button class="g-btn" @click="index = 2">滚动到第3个</button>
    <button class="g-btn" @click="autoplayTime = 0">停止自动播放</button>
    <button class="g-btn" @click="autoplayTime = 3000">3S自动播放</button>
    <button class="g-btn" @click="loop = !loop">
      {{ loop ? "关闭" : "开启" }}循环
    </button>
    <button class="g-btn" @click="minMoveDistance = '50%'">
      最小滑动距离50%切换
    </button>
    <button class="g-btn" @click="userPagination = !userPagination">
      {{ userPagination ? "关闭" : "开启" }}自定义分页
    </button>
    <button
      class="g-btn"
      v-if="userPagination"
      @click="isPageStyle1 = !isPageStyle1"
    >
      自定义分页样式切换
    </button>
    <button class="g-btn" @click="pagination = !pagination">
      {{ pagination ? "隐藏" : "显示" }}分页
    </button>
  </div>
</template>

<script>
export default {
  name: "DemoSwiper",
  data() {
    return {
      index: 0,
      minMoveDistance: "20%",
      autoplayTime: 3000,
      loop: true,
      list: [1, 2, 3, 4],
      pagination: true,
      userPagination: false,
      isPageStyle1: true,
    };
  },
  mounted() {
    window.onresize = () => {
      this.$refs.swiper.reset();
    };
  },
  methods: {
    add() {
      this.list.push(this.list.length + 1);
      this.$nextTick(() => {
        this.$refs.swiper.reset();
      });
    },
    update() {
      this.list = ["a", "b", "c", "d"];
      this.$nextTick(() => {
        this.$refs.swiper.reset();
      });
    },
    onTouchStart() {
      console.log("onTouchStart:");
    },
    onTouchMove(e, direction) {
      // 禁用水平方向滑动
      if (direction === "horizontal") {
        e.preventDefault();
      }
      console.log(`onTouchMove:${direction}`);
    },
    onTouchEnd() {
      console.log("onTouchEnd:");
    },
    slideClick(item, idx) {
      console.log(`slideClick: index-${idx}, item-${item}`);
    },
    slideChangeTransitionStart(idx) {
      console.log(`slideChangeTransitionStart:${idx}`);
    },
    slideChangeTransitionEnd(idx) {
      console.log(`slideChangeTransitionEnd:${idx}`);
    },
  },
};
</script>
<style lang="scss">
.oc-swiper {
  height: 200px;
  .slide-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #99a9bf;
    font-size: 30px;
    font-weight: bold;
  }
}
.user-pagination {
  position: relative;
  ul {
    margin-top: -24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    li {
      color: #fff;
      background: rgba(#000, 0.4);
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      border-radius: 50%;
      display: inline-block;
      margin: 0 4px;
      &.cur-page {
        background: #007aff;
      }
    }
  }
  .page-2 {
    margin-top: -24px;
    text-align: center;
    color: #000;
  }
}
</style>
<style lang="scss" scoped>
.demo-swiper-page {
  margin: 10px;
  .demo {
    margin-bottom: 10px;
  }
  .g-btn {
    margin-bottom: 10px;
  }
}
</style>