技术标签: 自定义动态tabar vuex 前端 tabbar vue.js javascript
使用了vuex做自定义动态tabbar,第一次进去小程序切换不会再闪烁完全是意料之外的收获,嘿嘿。
第一步,在组件里新建自定义tabbar所需的三个页面、还有自定义tabbar和header
tabbar.vue
<template>
<view class="tabbar">
<view class="" v-for="(item, index) in list" :key="index" @click="tabItemChange(index)">
<navigator hover-class="none" :url="item.pagePath" open-type="switchTab">
<view class="tabbar-inner">
<image class="tab-img" :src="index === cur ? item.selectedIconPath : item.iconPath" mode=""></image>
<view class="tab-name" :style="{color: index === cur ? '#007AFF' : '#B3B3B3'}">{
{item.text}}</view>
</view>
</navigator>
</view>
</view>
</template>
<script>
export default {
props: {
cur: {
type: Number,
default: 1
}
},
computed: {
list() {
console.log(this.$store.state.tabList)
// 显示在页面上的tabbar
return this.$store.state.tabList
}
},
methods: {
// 改变tabbar的下标
tabItemChange(e) {
this.$store.commit("tabChange", e)
}
}
}
</script>
<style lang="scss" scoped>
.tabbar {
width: 750rpx;
height: 98rpx;
background: #FFFFFF;
box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(204, 204, 204, 0.5);
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
bottom: 0;
z-index: 12;
.tabbar-inner {
display: flex;
align-items: center;
flex-direction: column;
padding: 10rpx 60rpx;
.tab-img {
width: 40rpx;
height: 40rpx;
}
.tab-name {
color: #B3B3B3;
font-size: 20rpx;
padding-bottom: 4rpx 0 10rpx;
}
}
}
</style>
第二步,在,page/index/index里,把第一步的组件引入进来,权限切换操作我都写在该组件里,代码如下:
<template>
<view>
<v-header></v-header>
<view class="" @click="tabChange">
<Notice v-if="name == 'notice'"></Notice>
<Person v-if="name == 'person'"></Person>
<Datacenter v-if="name == 'datacenter'"></Datacenter>
</view>
<v-tabbar :cur="cur"></v-tabbar>
</view>
</template>
<script>
import VHeader from '../../components/header.vue'
import VTabbar from '../../components/tabbar.vue'
import Notice from '../../components/notice/notice.vue'
import Person from '../../components/person/person.vue'
import Datacenter from '../../components/datacenter/datacenter.vue'
export default {
components: {
VHeader,
VTabbar,
Notice,
Person,
Datacenter
},
computed: {
// 通过对比名称显示tabbar的某一页面
name () {
return this.$store.state.tabList[this.$store.state.tab_cur].name_code
},
// 默认当前下标
cur() {
return this.$store.state.tab_cur
}
},
created() {
console.log(this.$store.state.tabList[this.$store.state.tab_cur], '首页呀', this.$store.state.tab_cur)
console.log(this.$store.state.tabList, 'tab', this.$store.state.tab_cur)
console.log('角色', this.$store.state.userinfo.roleType)
// 各种角色权限对应的数组,可以根据需求自行处理
const list = [{
iconPath: "/static/person.png",
selectedIconPath: "/static/person-active.png",
text: "人员认证",
name_code: "person"
},
{
iconPath: "/static/notice.png",
selectedIconPath: "/static/notice-active.png",
text: "园区公告",
name_code: "notice"
}]
// roleType为登录时获取到的角色权限,根据roleType显示tabbar,此为动态切换自定义tabbar的关键,暂时注释,自己解开测试
// if(this.$store.state.userinfo.roleType == 1) {
// this.$store.commit('tabItemChange', list)
// // this.$store.commit('curChange', this.$store.state.tabList.length)
// }
// 取到tabbar的长度-1 赋值给store中的tabbar下标
this.$store.commit('curChange', this.$store.state.tabList.length)
}
}
</script>
<style lang="scss" scoped>
</style>
第四步:创建store文件并挂载到main.js里
import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store/index.js'
//把vuex定义成全局组件
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
store // 挂载
})
app.$mount()
第五步,store中的代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userinfo: {
id: 13,
roleType: 1, // 1.游客2.普通用户3.分管4.企业
token: "a3fb27d3d26e43518894fa538c37c075-13",
updateTime: 1617162453105,
},
tabList: [{
iconPath: "/static/data.png",
selectedIconPath: "/static/data-active.png",
text: "数据",
name_code: "datacenter"
}, {
iconPath: "/static/person.png",
selectedIconPath: "/static/person-active.png",
text: "人员",
name_code: "person"
},
{
iconPath: "/static/notice.png",
selectedIconPath: "/static/notice-active.png",
text: "公告",
name_code: "notice"
}],
tab_cur: 1,
test: '测试的呀'
},
// 使用mutations直接更改state的值
mutations: {
tabChange(state, index) {
console.log(state, index, 'store中的tab切换事件')
state.tab_cur = index
},
// tabbar
tabItemChange(state, list) {
console.log(list, 'tab都有什么')
state.tabList = list
},
curChange(state, index) {
console.log(state, index - 1, 'tab-index')
state.tab_cur = index - 1
},
// 测试可删
ontest(state, txt) {
console.log(state, txt, '测试vuex可删')
state.test = txt
},
},
// 使用actions,通过mutations更改state的值
actions: {}
})
export default store
第六步,在App.vue里根据是否存在token判断跳转路由
onLaunch: function() {
// // 本来是隐藏原生的tabbar的
// uni.hideTabBar({
// animation: false
// })
console.log('App Launch')
const token = this.$store.state.userinfo.token
console.log(token, 'App里的token')
// 如果token不存在就跳转登录页,存在就跳首页
if(!token) {
uni.reLaunch({
url: "pages/login/login"
})
} else {
uni.switchTab({
url: "./pages/index/index"
})
}
},
完结撒花。源码在https://download.csdn.net/download/jingruoannan/16581373
文章浏览阅读119次。该楼层疑似违规已被系统折叠隐藏此楼查看此楼/***Getaparametervalue**@paramkeyString*@paramdefString*@returnString*/publicStringgetParameter(Stringkey,Stringdef){returnisStandalone?System.getProperty(ke..._java http隧道
文章浏览阅读913次。IP主机名备注192.168.117.14keepalived-master主节点192.168.117.15keepalived-slaver备节点192.168.117.100VIP1.主备节点均安装keepalived# yum install -y keepalived httpd2.主备节点均修改keepalived日志存放路径..._keepalived sendmail
文章浏览阅读469次。--==========================================--SPFILE错误导致数据库无法启动(ORA-01565)--========================================== SPFILE错误导致数据库无法启动 SQL> startup ORA-01078: failurein proce_ora01565 ora27046
文章浏览阅读6.1k次,点赞2次,收藏54次。功能测试基础知识总结_功能测试
文章浏览阅读3.2k次,点赞3次,收藏2次。pg 中文首字母排序_pg中文排序
文章浏览阅读3.1w次,点赞23次,收藏109次。本文主要讲解CONVERT函数_mysql convert
文章浏览阅读8.6k次,点赞2次,收藏2次。HTML5 的视频播放事件想必大家已经期待很久了吧,在HTML4.1、4.0之前我们如果在网页上播放视频无外乎两种方法: 第一种:安装FLASH插件或者微软发布的插件 第二种:在本地安装播放器,在线播放组件之类的 因为并不是所有的浏览器都安装了FLASH插件,就算安装也不一定所有的都能安装成功。像苹果系统就是默认禁用FLASH的,安卓虽然一开始的时候支持FLASH,但是在安卓4.0以后也开始不_微信开发者工具视频快进
文章浏览阅读5.4k次,点赞3次,收藏4次。在使用redis的过程常见错误总结1.JedisConnectionException Connection Reset参考这边文章:Connection reset原因分析和解决方案https://blog.csdn.net/cwclw/article/details/527971311.1问题描述Exception in thread "main" redis.clients...._jedisconnectionexception: java.net.socketexception: connection reset
文章浏览阅读8.3k次,点赞8次,收藏42次。目录1.Lua垃圾回收算法原理简述2.Lua垃圾回收中的三种颜色3.Lua垃圾回收详细过程4.步骤源码详解4.1新建对象阶段4.2触发条件4.3 GC函数状态机4.4标记阶段4.5清除阶段5.总结参考资料lua垃圾回收(Garbage Collect)是lua中一个比较重要的部分。由于lua源码版本变迁,目前大多数有关这个方面的文章都还是基于lua5.1版本,有一定的滞后性。因此本文通过参考当前..._lua5.3 gc
文章浏览阅读511次。最近家中的潮人,老妈闲着没事干,开始学玩电脑,引起他的各种好奇心。如看看新闻,上上微信或做做其他的事情。但意料之中的是电脑上会莫名出现各种问题?不翼而飞的图标?照片又不见了?文件被删了,卡机或者黑屏,无声音了,等等问题。常常让她束手无策,求助于我,可惜在电话中说不清,往往只能苦等我回家后才能解决,那种开心乐趣一下子消失了。想想,这样也不是办法啊, 于是,我潜心寻找了两款优秀的远程控制软件。两款软件...
文章浏览阅读1.8k次。二.初始化工作空间三.设置下载地址四.下载功能包此处可能会报错,请看:rosdep update遇到ERROR: error loading sources list: The read operation timed out问题_DD᭄ꦿng的博客-程序员宅基地接下来一次安装所有功能包,注意对应ROS版本 五.编译功能包isolated:单独编译各个功能包,每个功能包之间不产生依赖。编译过程时间比较长,可能需要几分钟时间。此处可能会报错:缺少absl依赖包_ros18.04 安装ca
文章浏览阅读4.1k次,点赞3次,收藏7次。Haobor2.2.1配置(trivy扫描器、镜像签名)docker-compose下载https://github.com/docker/compose/releases安装cp docker-compose /usr/local/binchmod +x /usr/local/bin/docker-composeharbor下载https://github.com/goharbor/harbor/releases解压tar xf xxx.tgx配置harbor根下建立:mkd_init error: db error: failed to download vulnerability db: database download