东莞企业自助建站系统,官网网站建设研究,网站添加子域名,柳州公司网站制作公司一、背景 最近在做一个uniapp开发的小程序遇到一个需求#xff0c;希望不同用户登录后展示不同的tabbar页面#xff0c;但是uniapp项目中的pages.json是只有一个list数组的#xff0c;并且是不能写成动态效果#xff0c;为了实现这个需求#xff0c;便自定义了tabbar组件 …一、背景 最近在做一个uniapp开发的小程序遇到一个需求希望不同用户登录后展示不同的tabbar页面但是uniapp项目中的pages.json是只有一个list数组的并且是不能写成动态效果为了实现这个需求便自定义了tabbar组件 二、效果展示
2.1、角色1admin账号登录效果 2.2、角色2tom账户登录效果 三、前置工作
3.1、将登录页面作为用户进入小程序展示的第一个页面pages.json文件中的pages数组第一个设为login页面
3.2、pages.json配置tabbar的基本路径只需路径即可
{pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path : pages/login/login,style : {navigationBarTitleText: ,enablePullDownRefresh: false}},{path: pages/index/index,style: {navigationBarTitleText: }},{path : pages/my/my,style : {navigationBarTitleText: ,enablePullDownRefresh: false}},{path : pages/warn/warn,style : {navigationBarTitleText: ,enablePullDownRefresh: false}}],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8},uniIdRouter: {},tabBar: {color: #999,selectedColor: #0aa671,borderStyle: white,list: [{pagePath: pages/index/index},{pagePath: pages/warn/warn},{pagePath: pages/my/my}]}
}四、创建tabbar组件
4.1、第一步在项目中创建components文件夹并在文件夹下创建tabbar组件 tabbar组件具体代码如下
templateview classtabview v-for(item,index) in list :keyindex classtab-item clickswitchTab(item, index)image classtab_img :srccurrentIndex index ? item.selectedIconPath : item.iconPath/imageview classtab_text :style{color: currentIndex index ? selectedColor : color}{{item.text}}/view/view/view
/templatescriptexport default {props: {selectedIndex: { // 当前选中的tab indexdefault: 0},},data() {return {color: #666666,selectedColor: #00BAB2,list: [],currentIndex:0,}},created() {this.currentIndex this.selectedIndex;let _this thisif (uni.getStorageSync(identify) tom) {//角色1_this.list [{pagePath: /pages/index/index,iconPath: /static/tab/home.png,selectedIconPath: /static/tab/home_active.png,text: 首页},{pagePath: /pages/my/my,iconPath: /static/tab/my.png,selectedIconPath: /static/tab/my_active.png,text: 我的}]} else {//角色2_this.list [{pagePath: /pages/index/index,iconPath: /static/tab/home.png,selectedIconPath: /static/tab/home_active.png,text: 首页},{pagePath: /pages/warn/warn,iconPath: /static/tab/warn.png,selectedIconPath: /static/tab/warn_active.png,text: 告警},{pagePath: /pages/my/my,iconPath: /static/tab/my.png,selectedIconPath: /static/tab/my_active.png,text: 我的}]}},methods: {switchTab(item, index) {this.currentIndex index;let url item.pagePath;uni.redirectTo({url:url})}}}
/scriptstyle langscss.tab {position: fixed;bottom: 0;left: 0;right: 0;height: 100rpx;background: white;display: flex;justify-content: center;align-items: center;padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部.tab-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;.tab_img {width: 60rpx;height: 60rpx;}.tab_text {font-size: 30rpx;margin-top: 9rpx;}}}
/style
注意 跳转路径pagePath以/开头
说明tab_img可以修改图标大小tab_text可以修改文字大小
4.2、第二步 在main.js文件中将自定义的tabBar定义为全局组件
//⭐⭐ main.js 文件
import tabBar from /components/tabbar/tabbar.vue
Vue.component(tabBar,tabBar)
4.3、第三步在需要使用的页面引入tabbar组件
//如 index页面
templateview告警tabBar selectedIndex 0/tabBar/view
/template//如 warn 页面
templateview告警tabBar selectedIndex 1/tabBar/view
/template//如 my 页面
templateview告警tabBar selectedIndex 2/tabBar/view
/template
4.4、第四步隐藏pages.json里配置的导航栏使用封装的tabbar组件在需要引入tabbar组件的页面进行配置
//如 warn 页面 index 和 my 页面也是同样的设置
scriptexport default {onShow() {//⭐隐藏pages.json里配置的导航栏使用封装的tabbar组件uni.hideTabBar({animation:false})}}
/script
五、登录页面根据不同身份进行tabbar切换逻辑
//登录 login 页面
template
view classcontainer
view classform-group
text用户名/text
input v-modelusername typetext placeholder请输入用户名/input
/viewview classform-groupview stylemargin-left: 30rpx;/view
text密码/text
input v-modelpassword typepassword placeholder请输入密码/input
/view
view classbtn-login
button clicklogin登录/button
/view
/view
/templatescript
export default {data() {return {//页面上设置的默认账户admin密码123456username: admin,password: 123456};},onShow() {uni.clearStorageSync(identify)},methods: {login() {const username this.username;const password this.password;let identify ;// 根据用户名和密码来确定身份if (username tom password 123456) {identify tom;} else if (username admin password 123456) {identify admin;} else {// 用户名或密码错误console.log(用户名或密码错误);return;}//本地存储uni.setStorageSync(identify, identify);// 跳转到首页uni.switchTab({url: /pages/index/index});}}
};
/scriptstyle scoped
.container {
padding: 30rpx;
}.form-group {display: flex;align-items: center;justify-content: center;
margin-bottom: 30rpx;
}
input{border: 1rpx solid #00BAB2;padding: 10rpx;
}
button {
background-color: #00BAB2;
color: white;
border: none;
border-radius: 20rpx;
}
/style六、问题拓展
6.1、问题当是角色1时点击tabbar我的页面文字和图标造成颜色闪烁
6.2、原因角色1是有两个tabbar “我的”页面对应的index值是1而selectedIndex 被设置为超出角色1 tab 的索引范围。在这种情况下currentIndex 的默认值为0而将 selectedIndex 设置为2 会导致 currentIndex 与实际选中的 tab 不一致进而导致文字和图标显示颜色发生闪烁。
6.3、解决在传递 selectedIndex 给 tabBar 组件时进行判断并确保它不会超出角色1 tab 的索引范围
6.4、重新修改my页面
// my 页面
templateview我的tabBar :selectedIndexselectedTabIndex/tabBar/view
/templatescriptexport default {computed: {//判断是什么角色selectedTabIndex() {return uni.getStorageSync(identify) tom ? 1 : 2;}},onShow() {uni.hideTabBar({animation:false})},}
/script
PS如果对你有帮助的话请给个赞有问题欢迎大家在评论区讨论。ღ( ´ᴗ ) ღ( ´ᴗ )
