ec.uniapp-master/components/index-banner/index-banner.vue

<!-- template只能有一个顶级标签,语法需要改成vue的语法来写 -->
<template>
	<view class="index-banner" :style="{marginBottom: meta.margin_bottom + 'px',background: meta.background_color}" v-if="bannerData && bannerData.length">
		<view class="banner-title" v-if="bannerTitle && show">
			<span>{{ bannerTitle }}</span>
			<span data-src="/pages/index/microPages/microPages?id=brand&name=brand" @tap="_jumpImg">
				更多
				<text class="iconfont icon-gengduo"></text>
			</span>
		</view>
		<view class="banner">
			<view class="top-image">
				<swiper
					:style="
						'height: ' +
							imgHeight +
							'px; padding-left: ' +
							meta.padding_left +
							'px; padding-right: ' +
							meta.padding_right +
							'px; padding-bottom: ' +
							meta.padding_bottom +
							'px; '
					"
					indicator-dots="true"
					autoplay="true"
					circular="true"
				>
					<swiper-item v-for="(item, index) in bannerData" :key="index">
						<image mode="widthFix" :src="item.image" :data-src="item.link" class="slide-image" @load="_imgLoad" @tap="_jumpImg"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	// 对应data
	data() {
		return {
			imgHeight: ''
		};
	},
	options: {
        addGlobalClass: true,
    },
	// 对应properties里面的字段
	  props: {
		  //轮播图数据
		  bannerData: {
		    type: Array,
		    value: ''
		  },
		  screenWidth: {
		    type: String,
		    value: ''
		  },
		  bannerTitle: {
		    type: String,
		    value: ''
		  },
		  show: {
		    type: Number,
		    value: ''
		  },
		  meta: {
		    type: Object,
		    value: ""
		  }
	},
	// 对应methods
	methods: {	  
	  //内部方法建议以下划线开头
	  _imgLoad(e) {
	    var height = e.detail.height;
	    var width = e.detail.width;
	    var ratio = width / height;
	    var screenWidth = this.screenWidth;
		if(this.meta && this.meta.padding_left){
			this.imgHeight = screenWidth / ratio - this.meta.padding_left
		} else{
			this.imgHeight = screenWidth / ratio
		}
	    
	  },
	  _jumpImg(e) {
	    var src = e.currentTarget.dataset.src;
	    if (!src || src == 'uto_miniprogram') return;
	    wx.navigateTo({
	      url: src,
	      fail: err => {
	        wx.switchTab({
	          url: src
	        });
	      }
	    });
	  },
	},
};
</script>

<!-- 复制之前的less放进来就可以 -->
<style lang="less">
	.index-banner{
		height: 900rpx;
  //margin-bottom: 10px;
  .banner-title{
    padding: 10px 15px 10px 15px;
    display: flex;
    justify-content: space-between;
    color: #000;
    align-items: center;
    background: #FFFFFF;
    span:nth-child(1) {
      font-size: 24px;
      font-weight: bold;
      line-height: 33px;
      display: inline-block;
      //padding-left: 6px;
      //border-left: 4px solid #E7031C;
    }

    span:nth-child(2) {
      font-size: 12px;
      display: flex;
      align-items: center;
      text{
        font-size: 15px;
        font-weight: 700;
        margin-left: 5px;
      }
    }
  }
  .banner {
    background: #FFFFFF;
    image {
      width: 100%;
	  height: 100%;
      object-fit: cover;

    }
  }

}
</style>