首页手记【备战春招】第11天首页拼团秒杀砍价促销活动组件开发

【备战春招】第11天首页拼团秒杀砍价促销活动组件开发

标签：

小程序

课程章节： 3-6 首页拼团秒杀砍价促销活动组件开发
课程讲师： CRMEB

课程内容：
1、首先创建拼团秒杀组件promotion.vue

<template>
	<view class="promotion">
		<view class="promotion-container">
			<view class="left">
				<navigator :url="list.imgList.list[0].info[3]" hover-class="none">
					<image :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="list.imgList.list[0].img" mode=""></image>
				</navigator>
			</view>
			<view class="right">
				<navigator :url="list.imgList.list[1].info[3]" hover-class="none">
					<image :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="list.imgList.list[1].img" mode=""></image>
				</navigator>
				<navigator :url="list.imgList.list[2].info[3]" hover-class="none">
					<image :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="list.imgList.list[2].img" mode=""></image>
				</navigator>
			</view>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	.promotion {

		&-container {
			display: flex;
			height: 260rpx;
			padding: 30rpx;
			justify-content: space-between;
		}

		.left {
			image {
				width: 260rpx;
				height: 260rpx;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: ;

			image {
				width: 416rpx;
				height: 124rpx;

			}
		}
	}
</style>

2、在index.vue中应用，再在comments 中注册，在template中使用,并获取数据

<template>
	<view class="home">
		<view class="home-container">
			<Banner :list='swiperData'></Banner>
			<SubCategory :list='menusData'></SubCategory>
			<Promotion :list="promotionData"></Promotion>
		</view>
	</view>
</template>

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

<style>
</style>

课程收获：
这节课主要学习到了直接在template跳转的方式navigator，该组件类似HTML中的组件，但只能跳转本地页面，常用的参与有url （应用内的跳转链接，值为相对路径或绝对路径）open-type（navigate：对应 uni.navigateTo 的功能，redirect：对应 uni.redirectTo 的功能，switchTab：对应 uni.switchTab 的功能，reLaunch：对应 uni.reLaunch 的功能，navigateBack：对应 uni.navigateBack 的功能，exit），hover-class（指定点击时的样式类，当hover-class="none"时，没有点击态效果）