https://yuang01.github.io/historyToday/index.js

1// 如果想变换轮播方式等，进阶的话，可以看这个 https://github.surmon.me/vue-awesome-swiper/
2// 当然你也可以引入jquery插件，都可以的, 不只是轮播图，其他特效也可以
3new Vue({
4  el: "#myHistorySwiper", // el不要是最外面的id_name，应该是html: ''里的div的id
5  data: function () {
6    return {
7      swiperOption: {
8        effect: "cube", // 轮播特效
9        loop: true, // 循环
10        autoplay: {
11          delay: 2500,
12          disableOnInteraction: false,
13        },
14      },
15      content: [],
16    };
17  },
18  computed: {
19    swiper() {
20      return this.$refs.myhistoryswiper.$swiper;
21    },
22  },
23  created() {
24    this.getHistoryList();
25  },
26  methods: {
27    // 鼠标移入停止轮播
28    stopAutoPlay() {
29      this.swiperOption.autoplay && this.swiper.autoplay.stop();
30    },
31    // 鼠标移出开始轮播
32    startAutoPlay() {
33      this.swiperOption.autoplay && this.swiper.autoplay.start();
34    },
35    // 请求开源api, 获取历史上的今天数据
36    getHistoryList() {
37      fetch("https://tenapi.cn/v2/history", {
38        method: "GET", // *GET, POST, PUT, DELETE, etc.
39      })
40        .then((res) => {
41          return res.json();
42        })
43        .then((data) => {
44          this.content = data.data.list;
45        })
46        .catch((err) => {
47          console.log("err", err);
48        });
49    },
50  },
51});