uniapp微信小程序自定义tabbar,并且实现每次切换都刷新页面

0、page.json定义页面pages

//page.json
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/indexPage/index",  //首页
			"style": {
				"navigationStyle": "custom", 
				"navigationBarTextStyle": "white" 
			}
		},
		{
			"path": "pages/my/index",
			"style": {
				"navigationStyle": "custom" // 我的
			}
		},
		{
			"path": "pages/playList/index",
			"style": {
				"navigationStyle": "custom", // 列表
				"enablePullDownRefresh": true
			}
		}
	],

1、 page.json中定义tabbar 并设置自定义样式 “custom”: true

//page.json

"tabBar": {
	"custom": true,
	"selectedColor": "#79D5AD",
	"color": "#999999",
	"backgroundColor": "#ffffff",
	"borderStyle": "white",
	"height": "0px",
	"list": [{
		"pagePath": "pages/indexPage/index",
		"text": " "
	}, {
		"pagePath": "pages/playList/index",
		"text": " "
	}, {
		"pagePath": "pages/my/index",
		"text": " "
	}]
}

2、封装tabbar公共组件,在实现页面跳转的时候用uni.switchTab()方法

//pl_footer.vue 自己封的组件
uni.switchTab({
				url: "/pages/indexPage/index",
				success: function(e) { //跳转成功后刷新页面
					var page = getCurrentPages().pop();
					if (page == undefined || page == null) return;
					page.onLoad();
				}
			})

3、在tabar页面中
(1) 引用公共组件

 // index.vue  首页
    <view>
		<tarBar tarbarType="index"></tarBar>
	</view>
	...
    import tarBar from '@/components/pl_nav/pl_footer.vue'
    ...
	components: {
		PlayCard: playCard,
		tarBar: tarBar
	}

(2)、uni.hideTabBar()隐藏原来的页面 一定要有

//index.vue

 onShow(e) {
		uni.hideTabBar({ //去掉自带的tabar 
		})
	}
	
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
对于uniapp微信小程序,你可以通过自定义组件来实现自定义tabbar。以下是一种实现方法: 1. 在 uniapp 项目中创建一个新的自定义组件,例如 "custom-tabbar"。 2. 在 custom-tabbar 组件的文件夹中,创建一个 JSON 文件,命名为 "custom-tabbar.json"。在该文件中定义组件使用的自定义属性,例如: ```json { "component": true, "usingComponents": {} } ``` 3. 在 custom-tabbar 组件的文件夹中,创建一个 WXML 文件,命名为 "custom-tabbar.wxml"。在该文件中编写自定义tabbar的布局,例如: ```html <view class="custom-tabbar"> <!-- 自定义tabbar按钮 --> <view class="custom-tabbar-item" bindtap="navigateToPage"> <!-- 按钮图标 --> <image src="{{ activeIndex === 0 ? 'icon1-active' : 'icon1' }}"></image> <!-- 按钮文字 --> <text class="{{ activeIndex === 0 ? 'active' : '' }}">Tab1</text> </view> <view class="custom-tabbar-item" bindtap="navigateToPage"> <!-- 按钮图标 --> <image src="{{ activeIndex === 1 ? 'icon2-active' : 'icon2' }}"></image> <!-- 按钮文字 --> <text class="{{ activeIndex === 1 ? 'active' : '' }}">Tab2</text> </view> <!-- 更多按钮 --> <view class="custom-tabbar-item more" bindtap="showMoreOptions"> <!-- 更多按钮图标 --> <image src="more-icon"></image> </view> </view> ``` 4. 在 custom-tabbar 组件的文件夹中,创建一个 WXSS 文件,命名为 "custom-tabbar.wxss"。在该文件中编写自定义tabbar的样式,例如: ```css .custom-tabbar { display: flex; align-items: center; height: 50px; background-color: #fff; } .custom-tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .custom-tabbar-item image { width: 30px; height: 30px; } .custom-tabbar-item text { font-size: 12px; margin-top: 5px; } .custom-tabbar-item.more { position: relative; } .custom-tabbar-item.more image { width: 40px; height: 40px; } .active { color: #007aff; } ``` 5. 在需要使用自定义tabbar的页面中,引入 custom-tabbar 组件,例如: ```html <template> <view> <!-- 页面内容 --> </view> <!-- 引入自定义tabbar组件 --> <custom-tabbar></custom-tabbar> </template> <script> import customTabbar from '@/components/custom-tabbar/custom-tabbar' export default { components: { customTabbar }, // 页面逻辑代码 } </script> <style> /* 页面样式 */ </style> ``` 通过以上步骤,你就可以在uniapp微信小程序实现自定义tabbar了。你可以根据自己的需求修改自定义tabbar的布局和样式,以及处理相应的点击事件。希望能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值