首页手记【备战春招】第10天金刚区导航组件开发

【备战春招】第10天金刚区导航组件开发

标签：

小程序

课程章节： 3-4首页金刚区导航组件开发
课程讲师： CRMEB

课程内容：
1、首先创建金刚区的组件SubCategory.vue

<template>
	<view class="sub-category">
		<view class="sub-category-container">
			<view class="list">
				<view class="item" v-for="(item,index) in list.imgList.list" :key="index" @click="onSwitchCategory(cate)">
					<image :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="item.img" mode=""></image>
					<text>{{item.info[0].value}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Object,
				default:()=>{
					
				}
			}
		},
		methods:{
			onSwitchCategory({info}){
				const url = info[1].value
				if(['/pages/index/index','/pages/goods_cate/goods_cate','/pages/order_addcart/order_addcart','/pages/user/index'].indexOf(url)===-1){
					uni.redirectTo({
						url
					})
				}else{
					uni.switchTab({
						url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sub-category{
		
		.list{
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 30rpx;
				image{
					width: 82rpx;
					height: 82rpx;
				}
				text{
					font-size: 24rpx;
					
				}
			}
		}
	}
</style>

2、在index.vue中应用，再在comments 中注册，在template中使用

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

<script>
	import Banner from './components/Banner.vue'
	import SubCategory from '/components/SubCategory.vue';
	export default {
		comments:{
			Banner,
			SubCategory
		},
		data(){
			return {
				swiperData:{},
				menusData:{}
			}
		},
		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
					
					app._initTabBar(data.tabBar.default)
				}else{
					uni.showToast({
						icon:'none',
						title:'首页数据获取失败，请刷新重试',
						duration:3000
					})
				}
			}
		}
	}
</script>

<style>
</style>

课程收获：
这节课主要复习了组件的使用，三部曲，创建、注册、使用，再有就是学习到了methods中创建点击事件，不同页面间的切换方式，例如uni.redirectTo(OBJECT)是关闭当前页面，跳转到应用内的某个页面，参数包括跳转的url，成功后的调用的函数success，跳转失败调用的函数fail，已经成功失败都点用的complete函数，要是跳转tabBar页面就需要uni.switchTab(OBJECT)，注意：navigateTo, redirectTo 只能打开非 tabBar 页面。switchTab 只能打开 tabBar 页面。reLaunch 可以打开任意页面。页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。