【备战春招】第9天 首Banner组件开发

课程名称： CRMEB uniapp电商项目二次开发实战

课程章节： 3-2首页Banner组件开发
课程讲师： CRMEB

课程内容：
1、页面内的非公用组件，在当前页面中新建一个components文件，再新建一个Banner.vue组件

<template>
	<view class="banner" v-if="list.isShow.val">
		<view class="banner-container">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in list.imgList.list" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item.img" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Object,
				default: () => {

				}
			}
		},
		data() {
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 375rpx;

		image {
			width: 100%;
			height: 375rpx;
		}
	}
</style>

2、首页中引入banner.vue组件

<template>
	<view class="home">
		<view class="home-container">
			<Banner></Banner>
		</view>
	</view>
</template>

<script>
	import Banner from './components/Banner.vue'
		
	export default {
		comments:{
			Banner
		},
		data(){
			return {
				
			}
		},
		onLoad() {
			this._getHomeData()
		},
		methods:{
			async _getHomeData(){
				const {status,data,msg} = await homeDataApi()
				if(status === this.API_STATUS_CODE.SUCCESS){
					console.log(status,data,msg)
					app._initTabBar(data.tabBar.default)
				}else{
					uni.showToast({
						icon:'none',
						title:'首页数据获取失败，请刷新重试',
						duration:3000
					})
				}
			}
		}
	}
</script>

<style>
</style>

3、安装node-scss scss-loader 使用scss进行样式编写
课程收获：
这个章节主要学习到了如何使用局部组件与轮播图swiper的如何使用，首先再当前目录下新建一个compontents的目录用于存放当前的页面用到的组件内容，然后在导入，在注册，然后在页面中使用三部曲，其中通过props给子组件进行传参，再有学习了swiper包括swiper常用到的属性，例如面板指示点，自动轮播，选中样式，延迟时间，再有就是一定要注意在swiper-item中添加key关键字，否则会出现报错等问题