Swiper常用于移动端网站的内容触摸滑动

纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

安装命令（vue2.X）

npm i -S swiper@5.4.5

局部导入

import Swiper from "swiper";
import "swiper/css/swiper.min.css";

参考示例

<template>
  <div class="grand-task">

        <div class="swiper-container grand-task-figure-lists-box">
          <div class="swiper-wrapper grand-task-figure-lists">
            <div
              v-for="(item, index) in grand_task_finish_list"
              :key="index"
              class="swiper-slide grand-task-figure-list"
            >
              <img :src="item.image" class="grand-task-figure-list-img" />
            </div>
          </div>
        </div>
      
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { getAchievement } from "@/apis/index";
import { openOtherPages } from "@/utils/long";
import DailyTask from "@/components/main-content/grand-task/daily-task";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "GrandTask",
  components: {
    DailyTask,
  },

  data() {
    return {
      progress: {},
      // 是否显示
      showNumber: true,
    };
  },
  computed: {
    ...mapState(["commonState", "init", "cacheData"]),

    selected() {
      return this.commonState.isBlessingBag;
    },

    uInfo() {
      return this.init.uInfo;
    },

    grand_task_finish_list() {
      return this.cacheData.grand_task_finish_list;
    },

    grand_task_list() {
      return this.cacheData.grand_task_list;
    },
  },
  mounted() {
    this.getList();
  },

  methods: {
    ...mapMutations([
      "updateCommonState",
      "updateBounced",
      "updateInitUserInfo",
      "updateCacheData",
    ]),
    async getList() {
      try {
        const res = await getAchievement();
        const status = res.data.response_status;
        const data = res.data.response_data;
        if (status.code === 0) {
          console.log(data);
          // 已获取到成就任务   /   成就任务列表
          this.updateCacheData({
            grand_task_finish_list: data.finish_list,
            grand_task_list: data.list,
          });

          console.log(this.progress);

          this.$nextTick(() => {
            // 创建一个swiper实例来实现轮播
            // eslint-disable-next-line no-unused-vars
            const swiper = new Swiper(".swiper-container", {
              // 循环播放
              autoplay: true,
              slidesPerView: 4,
              paginationClickable: true,
              spaceBetween: 20,
              // 切换效果
              // effect: "fade",
              // 撞击模式
              freeMode: {
                momentumVelocityRatio: 5,
              },
            });
          });
        } else {
          this.toast(status.error.replace(/\[.*?\]/g, ""));
        }
      } catch (e) {
        this.toast(e);
      }
    },

    sowTOP10(id) {
      console.log(id);
      // 有数据，才弹框
      if (this.list[id - 1].uInfos.length) {
        this.updateCommonState({ top10_index: id - 1 });
        this.updateBounced({ showBouncedTop10: true });
      }
    },

    goActivity(url) {
      openOtherPages(url);
    },

    onDetails(id) {
      this.updateCommonState({ top10_index: id - 1 });
      this.updateBounced({ showBouncedInformationCenter: true });
    },

    goGrandAchievement() {
      this.$router.push("/GrandAchievement");
    },

    onAppointment(isCan) {
      if (!isCan) {
        console.log("111");
        return;
      }
      alert("我要预约了");
    },

    onSwitch(tab) {
      console.log(tab);
      this.updateCommonState({ isBlessingBag: tab });
    },
  },
};
</script>

<style lang="scss">
.grand-task {
  z-index: 30;
  box-sizing: border-box;
  width: 6.9rem;
  height: 10.4rem;
  margin: -0.04rem auto 0;
  padding: 0.2rem;
  color: #fff;
  font-weight: bold;
  font-size: 0.36rem;
  line-height: 0.73rem;
  text-align: center;
  background-image: url(~@/img/main-content-2.png);
  background-size: 100% 100%;

  .grand-task-title {
    position: relative;
    width: 3rem;
    height: 0.5rem;
    color: #f1cc5e;
    font-weight: bold;
    font-size: 0.36rem;
    line-height: 0.5rem;
    background: linear-gradient(0deg, #ffe38b 0%, #e0e0ba 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    &::after {
      position: absolute;
      top: 0.15rem;
      left: 2.4rem;
      width: 0.45rem;
      height: 0.15rem;
      background: url(~@/img/annual-event-title-3.png);
      background-size: 100% 100%;
      content: "";
    }
    &::before {
      position: absolute;
      top: 0.15rem;
      right: 2.4rem;
      width: 0.45rem;
      height: 0.15rem;
      background: url(~@/img/annual-event-title-3.png);
      background-size: 100% 100%;
      transform: scaleX(-1);
      content: "";
    }
  }

  .grand-task-figure {
    .grand-task-figure-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .grand-task-figure-ico {
        width: 2.29rem;
        height: 0.61rem;
      }
    }

    .grand-task-figure-lists-box {
      width: 6.4rem;
      height: 1.4rem;
      margin: 0.2rem 0 -0.1rem;
      padding: 0 0.1rem;
      .grand-task-figure-lists {
        .grand-task-figure-list {
          // flex-shrink: 0;
          width: 1.28rem;
          height: 1.28rem;
          // margin: 0 0.1rem 0 0;
          background: url(~@/img/grand-task-1.png);
          background-size: 100% 100%;

          .grand-task-figure-list-img {
            width: 1rem;
            height: 1rem;
            margin: 0.14rem;
          }
        }
      }
    }

    .grand-task-figure-lists-p {
      position: relative;
      display: inline-block;
      width: 3.8rem;
      height: 0.26rem;
      margin: 0.3rem auto;
      color: #f1cc5e;
      font-size: 0.26rem;
      line-height: 0.26rem;
      text-align: center;
      background: linear-gradient(0deg, #ffe38b 0%, #e0e0ba 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
      &::after {
        position: absolute;
        top: 0.08rem;
        right: 0;
        width: 0.41rem;
        height: 0.15rem;
        background: url(~@/img/annual-event-title-3.png);
        background-size: 100% 100%;
        content: "";
      }
      &::before {
        position: absolute;
        top: 0.08rem;
        left: 0;
        width: 0.41rem;
        height: 0.15rem;
        background: url(~@/img/annual-event-title-3.png);
        background-size: 100% 100%;
        transform: scaleX(-1);
        content: "";
      }
    }
  }

  .grand-task-switch {
    display: flex;
    align-items: center;
    justify-content: center;

    .grand-task-select {
      z-index: 29;
      flex-shrink: 0;
      width: 3.42rem;
      height: 0.95rem;
      margin: 0 0 0 -0.1rem;
    }
  }
}
</style>