magazine-web/components/swiper-baner.vue

<template>
  <view class="uni-padding-wrap">
    <view class="page-section swiper">
      <view class="page-section-spacing">
        <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 :src="`http://192.168.3.45:9002${item.url}`" alt="" srcset="" />
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</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() {
    console.log(123);
    await this.imgQuery();
  },
  methods: {
    ...mapActions(['imgQuery']),
    async itemClick(e) {
      let path;
      // 栏目
      if (e.type == 0) path = `pages/list/index?column=${e.column}`;
      // 单页
      if (e.type == 1) path = `pages/details/index?id=${e._id}`;
      // 链接
      if (e.type == 2) {
        location.href = e.url;
        return;
      }
      uni.navigateTo({ url: path });
    }
  },
};
</script>