技术标签: 自定义动态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
文章浏览阅读1.5w次,点赞10次,收藏129次。文章目录目录模型评估评价指标1.分类评价指标acc、recall、F1、混淆矩阵、分类综合报告1.准确率方式一:accuracy_score方式二:metrics2.召回率3.F1分数4.混淆矩阵5.分类报告6.kappa scoreROC1.ROC计算2.ROC曲线3.具体实例2.回归评价指标3.聚类评价指标1.Adjusted Rand index 调整兰德系数2.Mutual Informa..._model.score
文章浏览阅读344次。因工作需要,在Apache上使用,重新学习配置mod_jk1. 分别安装Apache和Tomcat:2. 编辑httpd-vhosts.conf: LoadModule jk_module modules/mod_jk.so #加载mod_jk模块 JkWorkersFile conf/workers.properties #添加worker信息 JkLogFil_apache mod_jk 虚拟
文章浏览阅读335次。待老夫kotlin大成,扩展:MotionLayout 与 CoordinatorLayout,DrawerLayout,ViewPager 的 交互众所周知,MotionLayout 的 动画是有完成度的 即Progress ,他在0-1之间变化,一.CoordinatorLayout 与AppBarLayout 交互时,其实就是监听 offsetliner 这个 偏移量的变化 同样..._android onoffsetchanged
文章浏览阅读8.3k次,点赞3次,收藏19次。【转】多核处理器的工作原理及优缺点《处理器关于多核概念与区别 多核处理器工作原理及优缺点》原文传送门 摘要:目前关于处理器的单核、双核和多核已经得到了普遍的运用,今天我们主要说说关于多核处理器的一些相关概念,它的工作与那里以及优缺点而展开的分析。1、多核处理器 多核处理器是指在一枚处理器中集成两个或多个完整的计算引擎(内核),此时处理器能支持系统总线上的多个处理器,由总..._多核处理器怎么工作
文章浏览阅读306次。1. eclipse配置lombok 拷贝lombok.jar到eclipse.ini同级文件夹下,编辑eclipse.ini文件,添加: -javaagent:lombok.jar2. myeclipse配置lombok myeclipse像eclipse配置后,定义对象后,直接访问方法,可能会出现飘红的报错。 如果出现报错,可按照以下方式解决。 ..._eclispe每次运行个新项目都需要重新配置lombok吗
文章浏览阅读1.2w次,点赞31次,收藏126次。#注意:笔者在2021/11/11当天调试过这个代码是可用的,由于pdfminer版本的更新,网络上大多数的语法没有更新,我也是找了好久的文章才修正了我的代码,仅供学习参考。1、把pdf文件移动到本代码文件的同一个目录下,笔者是在pycharm里面运行的项目,下图中的x1文件夹存储了我需要转换成文本文件的所有pdf文件。然后要在此目录下创建一个存放转换后的txt文件的文件夹,如图中的txt文件夹。2、编写代码 (1)导入所需库# coding:utf-8import ..._python批量读取文字并批量保存
文章浏览阅读1.4k次。http://blog.csdn.net/pipisorry/article/details/52902234Scala 访问修饰符Scala 访问修饰符基本和Java的一样,分别有:private,protected,public。如果没有指定访问修饰符符,默认情况下,Scala对象的访问级别都是 public。Scala 中的 private 限定符,比 Java 更严格,在嵌套类情况下,外层_scala ===运算符
文章浏览阅读2.6k次,点赞7次,收藏19次。ER图导出为PDF或图片格式_数据库怎么导出er图
文章浏览阅读655次。CREATE OR REPLACE TRIGGER Trg_ReimFactBEFORE UPDATEON BP_OrderFOR EACH ROWDECLAREPRAGMA AUTONOMOUS_TRANSACTION;--自制事务fc varchar2(255);BEGINIF ( :NEW.orderstate = 2AND :NEW.TransState = 1 ) THENBEG..._oracle触发器更新同一张表
文章浏览阅读513次。目录概念debouncethrottle实现debouncethrottle应用场景debouncethrottle场景举例debouncethrottle概念debounce字面理解是“防抖”,何谓“防抖”,就是连续操作结束后再执行,以网页滚动为例,debounce要等到用户停止滚动后才执行,将连续多次执行合并为一次执行。throttle字面理解是“节流”,何谓“节流”,就是确保一段时..._throttle和debounce应用在哪些场景
文章浏览阅读526次。regex() $regex 正则表达式用于模式匹配,基本上是用于文档中的发现字符串 (下面有例子)注意:若未加 @Field("名称") ,则识别mongdb集合中的key名为实体类属性名。也可以对数组进行索引,如果被索引的列是数组时,MongoDB会索引这个数组中的每一个元素。也可以对整个Document进行索引,排序是预定义的按插入BSON数据的先后升序排列。save: 若新增数据的主键已经存在,则会对当前已经存在的数据进行修改操作。_java 操作mongodb
文章浏览阅读1k次。今天push代码到github仓库时出现这个报错TACKCHEN-MB0:tc-image tackchen$ git pushremote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.remote: Please see https://github.blog/2020-12-15-token-authentication_git push remote: support for password authentication was removed on august 1