https://hnest.github.io/js/mySwiper.js

1// 如果想变换轮播方式等，进阶的话，可以看这个 https://github.surmon.me/vue-awesome-swiper/
2// 当然你也可以引入jquery插件，都可以的, 不只是轮播图，其他特效也可以
3new Vue({
4  el: "#mySwiper",
5  data: function () {
6    return {
7      swiperOption: {
8        direction: "vertical", // 这个是竖着的
9        slidesPerView: 1,
10        spaceBetween: 30,
11        mousewheel: true,
12        // 注释上面的四个，则水平方向轮播
13        pagination: {
14          el: ".swiper-pagination",
15          clickable: true,
16        },
17        // 注释掉上面这个，则不显示小点点
18        loop: true, // 循环
19        autoplay: {
20          delay: 10000,
21          disableOnInteraction: false,
22        }, // 自动播放,注释掉则不自动播放
23        on: {
24          init: function () {
25            swiperAnimateCache(this); //隐藏动画元素
26            swiperAnimate(this); //初始化完成开始动画
27          },
28          slideChangeTransitionEnd: function () {
29            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
30          },
31        },
32        // or data-swiper-parallax="-100"
33        // 上面是文字动画效果，注释则取消文字动画，动画效果参见 https://www.swiper.com.cn/usage/animate/index.html
34      },
35      listData: [{index: '', title: '', desc: '', pic: '', hotScore: '', url: ''}],
36      listURL: [{title: '', heat: '', link: ''}],
37      listBili: [{url: '', pic: '', tname: '', title: '', desc: '', dynamic: '', short_link_v2: ''}],
38    };
39  },
40  computed: {
41    swiper() {
42      return this.$refs.myswiper.$swiper;
43    },
44  },
45  created() {
46    this.getList();
47    // this.getURL();
48    // this.getBili();
49  },
50  methods: {
51    // 鼠标移入停止轮播
52    stopAutoPlay() {
53      this.swiperOption.autoplay && this.swiper.autoplay.stop();
54    },
55    // 鼠标移出开始轮播
56    startAutoPlay() {
57      this.swiperOption.autoplay && this.swiper.autoplay.start();
58    },
59     // 请求开源api
60    getList() {
61      fetch("https://api.vvhan.com/api/hotlist/bili", {
62      // fetch("https://tenapi.cn/v2/weekly", {
63      // fetch("https://api.bilibili.com/x/web-interface/popular?ps=20&pn=1", {
64      // fetch("https://qqlykm.cn/api/hotlist/get?key=XWM0J8FEYVbwggCgV1PuJqLj5s&type=bilibili", {
65        method: "GET", // *GET, POST, PUT, DELETE, etc.
66      })
67      .then((res) => {
68        return res.json();
69      })
70      .then((data) => {
71        this.listData = data.data;
72        console.log(this.listData);
73      })
74      .catch((err) => {
75        console.log("err", err);
76      });
77    },
78    getURL() {
79      // fetch("https://apis.jxcxin.cn/api/bilihot", {
80      fetch("https://v.api.aa1.cn/api/bilibili-rs/", {
81        method: "GET",
82      })
83      .then((res) => {
84        return res.json();
85      })
86      .then((data) => {
87        this.listURL = data.data;
88      })
89      .catch((err) => {
90        console.log("err", err);
91      });
92    },
93    getBili() {
94      fetch("https://api.hnest.eu.org/doit?token=get_info&hook_name=bilibili&type=rank", {
95        method: "GET",
96      })
97      .then((res) => {
98        return res.json();
99      })
100      .then((data) => {
101        let arr = data.callback.data.list.filter(el => {
102          return el.pic;
103        });
104        this.listBili = data.callback.data.list;
105        // console.log(this.listBili);
106      })
107      .catch((err) => {
108        console.log("err", err);
109      });
110    }
111  },
112});