15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页

uni中自定义tabbar的实现思路

李家霖| 发布于 2021-07-20 21:58:47| 393阅读| 0点赞| 0评论
举报

在一个界面中使用自定义的tabbar可以 实现界面的切换

原生的tabbar与自定义的tabbar不同的地方在于   原生的tabbar中的每一项都是 一个单独的界面 会有跳转事件      自定义的tabbar中的每一项点击时也是会有界面的跳转  但只是在视觉效果上看起来进行了跳转,实际上只是在一个界面中通过tabbar的点击将某一部分显示,界面最终是没有跳转。


        //  tabbar的跳转项          <home v-if="page_cur==='basics'"></home>
		<classify v-if="page_cur==='help'"></classify>
		<cart v-if="page_cur==='members'"></cart>
		<order v-if="page_cur==='message'"></order>
		
		
        //  tabbar导航		
		<view class="shoppingTabbar">
			<view class="tabItem" v-for="item in navbar" @tap="navChange(item.path)">
				<view class="icon">
					<image :src="item.path===page_cur?item.icon_cur:item.icon" mode="widthFix"></image>
				</view>
				<!-- 当前页 -->
				<view class="name select" v-if="item.path===page_cur">{{item.name}}</view>
				<!-- 其他页 -->
				<view class="name" v-if="item.path!=page_cur">{{item.name}}</view>
			</view>
		</view><br/>                //  data 数据<br/>                navbar:[
					{
						path:"basics",
						icon:"../../static/shoppingStatic/tabbar/home.png",
						icon_cur:"../../static/shoppingStatic/tabbar/homeActive.png",
						name:"主页",
						sup:0
					},
					{
						path:"help",
						icon:"../../static/shoppingStatic/tabbar/fenlei.png",
						icon_cur:"../../static/shoppingStatic/tabbar/fenleiActive.png",
						name:"分类",
						sup:0
					},
					{
						path:"members",
						icon:"../../static/shoppingStatic/tabbar/shopping.png",
						icon_cur:"../../static/shoppingStatic/tabbar/shoppingActive.png",
						name:"兑购车",
						sup:0
					},
					{
						path:"message",
						icon:"../../static/shoppingStatic/tabbar/user.png",
						icon_cur:"../../static/shoppingStatic/tabbar/userActive.png",
						name:"我的订单",
						sup:0
					}
				],<br/><br/>            // 点击事件<br/>            navChange(path){
				this.page_cur = path
			},<br/>


在界面中除了 自定义的tabbar组件之外  还有四个外部引入的组件 四个引入的组件分别对应tabbar中的每一项   四个引入的组件并不会全部的显示 通过v-if来判断这四个组件中只能有一个被显示  点击tabbar的任意一项都会触发事件   事件会改变这四个组件的v-if判断  从而改变当前显示的组件  实现类似于切换的效果


 

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

李家霖
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部