hlm_pl_mall_h5/pages/home/index/IndexBanner.vue

<template>
  <swiper class="index-banner" :class="{'full':full}" :autoplay="true" v-bind:style="'width:'+getBannerStyle.width+'px;height:'+getBannerStyle.height+'px'" :indicator-dots="isShowIndicators">
    <swiper-item v-for="(item, index) in items" :key="index">
      <view class="div banner-wrapper"><image mode="aspectFit" class="img banner-image" :src="item.adv_code" v-if='item.adv_code' @click="goAdUrl(item)"></view>
    </swiper-item>
  </swiper>
</template>

<script>
import { urlencode } from '@/util/common'
export default {
  name: 'IndexBanner',
  data () {
    return {
    }
  },
  props: ['items','full'],
  computed: {
    getBannerStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = width
      let itemHeight = width * (300 / 702)
      return {
        width: itemWidth,
        height: itemHeight
      }
    },
    isShowIndicators () {
      if (this.items && this.items.length > 1) {
        return true
      }
      return false
    }
  },
  methods: {
    goAdUrl (item) {
      uni.navigateTo({url:item.adv_typedate})
    }
  }
}
</script>
<style scoped lang="scss">
  .index-banner{padding-top:$modelSpace;padding-bottom:1.5rem;background: #fff;
    .banner-wrapper{position:absolute;top:0;bottom:0;left:$pageSpace;right:$pageSpace;
      .banner-image{width:100%;height:100%;border-radius:.4rem;}
    }
  }
  .index-banner.full{padding-top:0;
    .banner-wrapper{left:0;right:0;
      .banner-image{border-radius:0}
    }
  }
</style>