magazine-web/components/swiper-baner.vue

<template>
  <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="time" :duration="duration">
    <swiper-item v-for="(item, index) in imgList" :key="index" @click="itemClick(item)">
      <img class="img" :src="`http://192.168.0.45:9002${item.img}`" />
    </swiper-item>
  </swiper>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  props: {
    // 自动播放间隔
    time: { type: Number, default: 2000 }
  },
  computed: {
    ...mapState(['imgList'])
  },
  data() {
    return {
      // 指示点
      indicatorDots: true,
      // 自动播放
      autoplay: true,
      // 幻灯片切换时长(动画时长)
      duration: 500,
    };
  },
  async mounted() {
    await this.imgQuery();
  },
  methods: {
    ...mapActions(['imgQuery']),
    async itemClick(e) {
      let path;
      // 栏目
      if (e.type == 1) path = `/pages/list/index?column=${e.column}`;
      // 单页
      if (e.type == 2) path = `/pages/details/index?pages=${e._pages}`;
      // 链接
      if (e.type == 0) {
        location.href = e.url;
        return;
      }
      console.log(path);
      uni.navigateTo({ url: path,
      success: res => {
        console.log(res, 'res');
      },
      fail: (err) => {
        console.log(err, 123);
      },
      complete: () => {
        console.log(231);
      }});
    }
  },
};
</script>
<style lang="scss" scoped>
.img {
  width: 100%
}
</style>