技术标签: 自定义动态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
文章浏览阅读4.9k次,点赞3次,收藏25次。看网上教程,跟着配置,然后装完anaconda之后,大家都继续安装pycharm,然后傻吊的以为Ubuntu下的anaconda是没有图形化界面的,只有win下面 装完anaconda之后,可以直接在jupyter下面写代码今天突然发现Ubuntu下anaconda也是有图像化界面的$ conda --version /* 查看版本 */$ conda create --name my_en..._ubuntu安装anaconda后怎么运行图形化节目
文章浏览阅读771次,点赞22次,收藏11次。只记得我在一个昏暗潮湿的地方喵喵地哭泣着。——夏目漱石《我是猫》到目前为止,我们看到的神经网络都是前馈型神经网络。(feedforward)是指网络的传播方向是单向的。具体地说,先将输入信号传给下一层(隐藏层),接收到信号的层也同样传给下一层,然后再传给下一层……像这样,信号仅在一个方向上传播。虽然前馈网络结构简单、易于理解,而且可以应用于许多任务中。不过,这种网络存在一个大问题,就是不能很好地处理时间序列数据(以下简称为“时序数据”)。
文章浏览阅读2.5k次。1本地数据传输类似cp的复制,实现文件,目录的增量复制。#语法模式rsync命令 参数 src源文件/目录 dest目标文件/目录1.本地文件复制# 复制hosts文件[root@chaogelinux ~]# rsync /etc/hosts /tmp/2.复制目录内容-r, --recursive 对子目录以递归模式处理# 复制/data下所有内容到/tmp[root@lb01 ~]# rsync -r /data/ /tmp/# 复制/data整个文件夹到/tmp_rsync本地拷贝
文章浏览阅读1.4k次,点赞3次,收藏11次。约瑟夫环问题: 问题描述:设有编号为1,2,3……n的n个人顺时针方向围坐一圈,每人有一密码(正整数)。开始时给出一初始密码m,从编号为1的人开始报数,报m的人出列;以后将出列者的密码作为新的m,从顺时针方向紧挨着他的下一个人开始报数……直至所有人出列。试编算法,求出出列顺序。要求:用不带头结点的单向循环链表实现从键盘输入n,m各人的密码由计算机随机产生(1~10的正整数,也可以自定义_py约瑟夫环问题n,k,m要求由键盘输入值,每个人持有的密码随机生成。 2、每个函数完
文章浏览阅读1.7k次,点赞21次,收藏17次。这项研究介绍了一种自主运动规划的新方法,在Frenet坐标系内用强化学习(RL)代理通知分析算法。这种结合直接解决了自动驾驶中适应性和安全性的挑战。运动规划算法对于导航动态和复杂的场景至关重要。然而,传统方法缺乏不可预测环境所需的灵活性,而机器学习技术,特别是强化学习(RL),提供了适应性,但存在不稳定性和缺乏可解释性。我们独特的解决方案将传统运动规划算法的可预测性和稳定性与RL的动态适应性相结合,使系统能够有效地管理复杂的情况并适应不断变化的环境条件。_frenetix rl
文章浏览阅读335次。springboot整合shardingshere+druid 读写分离和分库分表,mybatis-plus_spring.shardingsphere.sharding.master-slave-rules
文章浏览阅读109次。监听耗时仅代表了 AHAS ARMS Listener(即调用链收集器)在收集并处理当前请求的调用信息时所需要的时间。它不包括网络传输、处理请求、执行操作、处理响应等其他阶段的时间,仅代表 Listener 所需的时间。通常这个时间会很短,只有几毫秒甚至更短。接口实际耗时包括了整个请求/响应周期中的所有时间,包括网络传输、处理请求、执行操作、处理响应等阶段消耗的时间。它代表了该请求在客户端发起到最终服务器响应完成所花费的总时间。_arms调用链路耗时看不懂
文章浏览阅读2.5k次。一、 SQL注入1.原理:SQL注入就是把SQL命令插入到Web表单然后提交到所在页面请求(查询字符串),从而达到欺骗服务器执行恶意的SQL命令。它是利用现在已有的应用程序,将SQL语句插入到数据库中执行,执行一些并非按照设计者意图的SQL语句。2.原因:根据相关技术原理,SQL注入可以分为平台层注入和代码层注入。前者由不安全的数据库配置或数据库平台的漏洞所致;后者主要是由于程序员对输入..._web 应用中常见的漏洞及其危害有哪些
离散数学中的命题逻辑,包括命题的表示和联结词的运用,推理理论和常用的证明方法,如真值表法和直接证明法。还介绍了附加前提证明法或CP规则。
文章浏览阅读8.6k次。Spring Expression Language(SpEL)spring的一种表达式。用来动态的获取,值、对象等。 样式: #{ …} 使用既定的规则放置在花括号中。式中的规则得以运行,可以反馈结果。理论上可以返回任何类型。 说说两种方式去设置SpELAnnotation注解。@Value()方便快捷。 你可以在里面方式任何符合SpEL规范的语句,并把它的返回值注..._spring expression language
文章浏览阅读1.7k次。ansible最大并发 Ansible是一种功能强大的无代理(但易于使用且轻巧)的自动化工具,自2012年推出以来一直稳步流行。这种流行在一定程度上是由于其简单性。 默认情况下,Ansible的最基本依赖项(Python和SSH)几乎在所有地方都可用,这使得Ansible可以轻松用于各种系统:服务器,工作站,Raspberry Pi,工业控制器,Linux容器,网络设备等。 Ansible可..._ansible 提升 高并发
文章浏览阅读479次。应我的客户要求,需要找到一款可以在极短时间识别二维条码的软件以应对他们现在极其迅速的货品入库需求。正好听说过一款Dynamsoft Barcode Reader的开发包,根据其官网介绍最新版对条码检测速度比以前的版本快2倍以上。根据对Dynamsoft Barcode Reader8.8SDK包拆解,其中含了JavaScript Package /.NET Package /C/C++ Package /Python Package /Java Package /iOS Package /A..._barcode reader