继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

imooc66
关注TA
已关注
手记 54
粉丝 2
获赞 23

课程章节: 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关键字,否则会出现报错等问题

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP