为了账号安全,请及时绑定邮箱和手机立即绑定

【备战春招】第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。

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
2
获赞与收藏
23

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消