关于vue2+uniapp+uview+vuex 私募基金项目小程序总结

1.关于权限不同tabbar处理

uniapp 实现不同用户展示不同的tabbar(底部导航栏)_uniapp tabbar-CSDN博客

但是里面还有两个问题 一个是role应该被本地存储并且初始化  第二个问题是假设我有3个角色 每个角色每个tabbar不一样的,点击tabbar时候会导致错乱 第三个问题 需要监听角色变化

问题处理: 在vuex的时候为role初始化

role: uni.getStorageSync('role') || null, // 从本地存储获取初始值

 第二个问题  让传送过来的值selectIndex==index 表示选中 

 第三个问题监听

<template><view class="tab"><view v-for="(item,index) in list" :key="index" class="tab-item" @click="switchTab(item, index)"><image class="tab_img" :src="selectedIndex == index ? item.selectedIconPath : item.iconPath"></image><view class="tab_text" :style="{color: selectedIndex == index ? selectedColor : color}">{{item.text}}</view></view></view>
</template><script>import {mapState} from 'vuex'export default {props: {selectedIndex: { // 当前选中的tab indexdefault: 0},},data() {return {color: "#999",selectedColor: "#0D396A",list: [],currentIndex: 0,}},computed: {...mapState(['role']),},watch: {role(newRole) {this.updateListBasedOnRole(newRole); // 当 role 变化时调用这个方法}},created() {console.log('this.role', this.role);this.updateListBasedOnRole(this.role)},methods: {switchTab(item, index) {// console.log('index', index);// this.currentIndex = index;// console.log('this.currentIndex', this.currentIndex);let url = item.pagePath;// console.log('url', url);uni.switchTab({url: url})},updateListBasedOnRole(role) {// this.currentIndex = this.selectedIndex;if (role === 1) {//角色1this.list = [{pagePath: "/pages/tabBar/staging/index",iconPath: require("@/static/tabbar/manage.png"),selectedIconPath: require("@/static/tabbar/manageSelect.png"),text: "基金管理"}, {pagePath: "/pages/tabBar/warm/index",iconPath: require("static/tabbar/warm.png"),selectedIconPath: require("static/tabbar/warmSelect.png"),text: "预警管理"},{pagePath: "/pages/tabBar/user/index",iconPath: require("static/tabbar/my.png"),selectedIconPath: require("static/tabbar/mySelect.png"),text: "个人中心"}]} else if (role === 2) {//角色2this.list = [{pagePath: "/pages/tabBar/staging/index",iconPath: require("@/static/tabbar/manage.png"),selectedIconPath: require("@/static/tabbar/manageSelect.png"),text: "基金管理"},{pagePath: "/pages/tabBar/user/index",iconPath: require("static/tabbar/my.png"),selectedIconPath: require("static/tabbar/mySelect.png"),text: "个人中心"}]} else {this.list = [{pagePath: "/pages/tabBar/staging/index",iconPath: require("@/static/tabbar/manage.png"),selectedIconPath: require("@/static/tabbar/manageSelect.png"),text: "基金管理"}, {pagePath: "/pages/tabBar/dataAuditinng/index",iconPath: require("static/tabbar/data.png"),selectedIconPath: require("static/tabbar/dataSelect.png"),text: "数据审核"}, {pagePath: "/pages/tabBar/warm/index",iconPath: require("static/tabbar/warm.png"),selectedIconPath: require("static/tabbar/warmSelect.png"),text: "预警管理"},{pagePath: "/pages/tabBar/user/index",iconPath: require("static/tabbar/my.png"),selectedIconPath: require("static/tabbar/mySelect.png"),text: "个人中心"}]}}}}
</script><style lang="scss">.tab {width: 100%;height: 98rpx;position: fixed;bottom: 0;left: 0;right: 0;height: 100rpx;background: white;@include flx(row, center, center) z-index: 1000;.tab-item {flex: 1;@include flx(column, center, center) .tab_img {width: 40rpx;height: 40rpx;}.tab_text {font-size: 24rpx;}}}
</style>

其他照常

2.关于uview 在浏览器和模拟器正常 样式在微信小程序崩溃

uniapp 开发H5打包微信小程序样式失效的解决之道_uniapp 样式丢失-CSDN博客

1.输入框崩溃

 我希望输入文字是白色的 调了很久 发现文档其实有 和element,antd有很大的不同 直接输入框加color="#fff"

<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" class="forms"><u-form-item prop="user"><u--input v-model="model.user" border="none" placeholder="请输入手机号" clearableclass="u-input__content" color="#fff"></u--input></u-form-item><u-form-item prop="password"><u--input v-model="model.password" border="none" placeholder="请输入密码" password clearableclass="u-input__content" color="#fff" ></u--input></u-form-item></u--form>
.u-input__content {height: 112rpx !important;background-color: rgba(0, 0, 0, .3) !important;padding: 0px 12rpx !important;border-radius: 10rpx !important;}/* #ifdef MP-WEIXIN */::v-deep .u-input__content {height: 112rpx !important;background-color: rgba(0, 0, 0, .3) !important;padding: 0px 12rpx !important;border-radius: 10rpx !important;}/* #endif */

 2.表头,按钮崩溃

/* #ifdef MP-WEIXIN */::v-deep .uni-table-th {background-color: #f0f0f0;color: #333;font-weight: bold;}::v-deep .u-button.data-v-2bf0e569 {width: 100%;width: 327rpx;}/* #endif */

3.关于条件编译

条件编译处理多端差异 | uni-app官网 (dcloud.net.cn)

4.关于uniapp生命周期

uniapp生命周期分成两种  一种是页面生命周期,一种是应用生命周期

页面生命周期

应用生命周期

应用生命周期和页面生命周期的区别主要体现在以下几个方面

uniapp生命周期钩子

uniapp页面也能使用生命周期钩子,但是组件只能使用生命周期钩子

5. uniapp组件生命周期--生命周期钩子

6.vue生命周期是什么?

生命周期--生命周期钩子

 7.UniApp 的生命周期钩子与 Vue 的生命周期钩子一样吗?

8.created,mounted 和onshow,onload,computed 谁快

在 UniApp 中,createdmounted 是组件的生命周期钩子,而 onLoadonShow 是页面的生命周期钩子。一般来说,created 在组件实例被创建时调用,mounted 在组件挂载后调用,通常都在页面加载前。onLoad 在页面加载时调用,而 onShow 在页面每次显示时调用。所以,createdmounted 通常比 onLoadonShow 更早执行。至于 computed,它们是计算属性,会在数据变化时更新,所以执行时机依赖于数据的变化。

created(会在组件实例化时立即执行)>computed(属性会在组件的创建和更新阶段自动重新计算)>onshow(只有在组件被显示时才会被调用)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/435321.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows11安装Docker Desktop教程

目录 一.安装前置步骤 ▐ 开启虚拟化 ▐ 安装WSL2 ▐ 安装Linux环境 二.Windows上安装Docker 一.安装前置步骤 ▐ 开启虚拟化 首先确保虚拟化的开启&#xff0c;打开任务管理器后查看&#xff1a; 确保图中的虚拟化是已启用&#xff0c;没有开启的需要通过BIOS进行开启&…

基于php的在线租房管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

MySQL-联合查询

1.简介 1.1为什么要使用联合查询 在数据设计时由于范式的要求&#xff0c;数据被拆分到多个表中&#xff0c;那么要查询⼀个条数据的完整信息&#xff0c;就 要从多个表中获取数据&#xff0c;如下图所⽰&#xff1a;要获取学⽣的基本信息和班级信息就要从学⽣表和班级表中获…

全网最全软件测试面试题(含答案解析+文档)

一、软件测试基础面试题 1、阐述软件生命周期都有哪些阶段? 常见的软件生命周期模型有哪些? 软件生命周期是指一个计算机软件从功能确定设计&#xff0c;到开发成功投入使用&#xff0c;并在使用中不断地修改、增补和完善&#xff0c;直到停止该软件的使用的全过程(从酝酿到…

修改Opcenter EXFN 页面超时时间(Adjust UI Session Extend Token)

如果你想修改Opcenter EXFN中页面Session的超时时间&#xff0c;你可以按照如下步骤修改SessionAge 这个参数&#xff1a; 管理员运行CMD执行以下命令 umconf -getconfig -file C:\temp\config.json如果第2步有报错&#xff0c;则执行步骤4;如果没有报错则执行第5步如果第2步…

react-问卷星项目(2)

流程 husky 一个git hook 工具&#xff0c;即在git commit之前执行自定义的命令&#xff0c;将规范流程化&#xff0c;如执行代码风格的检查&#xff0c;避免提交非规范的代码&#xff0c;在github搜索即可。 这两条是接着执行的&#xff0c;表示创建husky&#xff0c;在文档…

C++【类和对象】(取地址运算符重载与实现Date类)

文章目录 取地址运算符重载const成员函数取地址运算符重载 Date类的实现Date.hDate.cpp1.检查日期合法性2. 构造函数/赋值运算符重载3.得到某月的天数4. Date类 - 天数的操作4.1 日期 天数4.2 日期 天数4.3 日期 - 天数4.4 日期 - 天数 5. Date的前后置/--5.1 前置5.2 后置5.…

fastadmin搜索刷新列表,怎么限制用户频繁点击?

文章目录 fastadmin搜索刷新列表&#xff0c;怎么限制用户频繁点击&#xff1f;解决方案fastadmin事件方法实现完结 fastadmin搜索刷新列表&#xff0c;怎么限制用户频繁点击&#xff1f; fastadmin目前有个很致命的问题&#xff0c;就是用户可以频繁的点击搜索等按钮&#xf…

Linux防火墙-nat表

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们经过上小章节讲了Linux的部分进阶命令&#xff0c;我们接下来一章节来讲讲Linux防火墙。由于目前以云服务器为主&#x…

android kotlin Extension扩展函数

1、新建一个kt文件&#xff1a; 2、代码&#xff1a; class User(var name:String)/**扩展函数**/ fun User.Print(){print("用户名 $name") }// 扩展函数 swap,调换不同位置的值 fun MutableList<Int>.swap(index1: Int, index2: Int) {val tmp this[index1…

组合逻辑元件与时序逻辑元件

组合逻辑元件和时序逻辑元件都是数字电路中的基本构建块&#xff0c;但它们在功能和结构上存在显著差异。 1. 组合逻辑元件: 内容: 组合逻辑元件的输出仅取决于当前的输入&#xff0c;而与之前的输入无关。 它们没有记忆功能。 常见的组合逻辑元件包括&#xff1a; 与门 (AND…

Java_TestNg

TestNg 前言支持特性 使用步骤1.引入库 常用注解Test注解BeforeSuite AfterSuiteAfterClass BeforeClassAfterTest BeforeTestAfterGroups BeforeGroupsBeforeMethod AfterMethodDataProviderFactoryListenersPatameters断言相等 不相等true/falsenull / !nullequals / !equals…

【C++篇】启航——初识C++(上篇)

目录 引言 一、C的起源和发展史 1.起源 2.C版本更新 二、C在⼯作领域中的应⽤ 三、C入门建议 1.参考文档 2.推荐书籍 四、C的第一个程序 1.C语言写法 2.C写法 五、命名空间 1.为什么要有命名空间 2.定义命名空间 3.主要特点 4.使用示例 六、C输⼊&输出 …

系统架构师-面向服务架构(SOA)全解

1、为什么需要SOA架构 1.1 系统集成问题 异构系统整合 例如&#xff0c;一个企业可能同时拥有用 Java 开发的企业资源规划&#xff08;ERP&#xff09;系统、用 C# 开发的客户关系管理&#xff08;CRM&#xff09;系统以及用 Python 开发的数据分析系统。通过 SOA&#xff0…

Transformers 中的 Softmax 可以并行加速么?

Transformers 中的 Softmax 可以并行加速么&#xff1f; 面试题 Softmax 如何并行&#xff1f; Softmax 计算公式 安全的 Softmax 运算 Softmax函数在深度学习中广泛应用于多分类问题的输出层&#xff0c;它通过指数化和归一化将一个实数向量转换为概率分布。然而&#xff…

基于springboot vue 大学生竞赛管理系统设计与实现

博主介绍&#xff1a;专注于Java vue .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的…

YoloV10改进策略:BackBone改进|PoolFormer赋能YoloV10,视觉检测性能显著提升的创新尝试

摘要 在深度学习的广阔领域中,目标检测作为计算机视觉的基石任务之一,始终吸引着研究者的广泛关注。近期,我们大胆尝试将前沿的PoolFormer主干网络引入经典的目标检测框架YoloV10中,这一创新性融合不仅为YoloV10注入了新的活力,更在检测精度与效率上实现了双重飞跃,成为…

【Linux学习】【Ubuntu入门】2-1 Linux系统下运行C语言输出hello word

1.双击打开VMware软件&#xff0c;点击开启此虚拟机后&#xff0c;等待点击头像输入密码进入 2.“CtrlAltt”调出命令行终端&#xff0c;输入命令sudo apt-get install vim安装vim&#xff0c;输入命令sudo apt-get install gcc安装gcc 3.输入命令vi hello.c进入C语言编写环境&…

Web端云剪辑解决方案,提供多轨视频、音频、特效、字幕轨道可视化编辑

传统视频剪辑软件的繁琐安装、高昂硬件要求以及跨平台协作的局限性&#xff0c;让无数创意者望而却步。美摄科技作为云端视频编辑技术的领航者&#xff0c;携其革命性的Web端云剪辑解决方案&#xff0c;正重新定义视频创作的边界&#xff0c;让专业级视频剪辑触手可及&#xff…

【Linux】Docker下载与使用-nginx

目录 一、Docker介绍 二、Docker结构 三、下载Daocker 1. 在linux上下载docker&#xff0c;执行以下命令即可&#xff1a; 2. 开启docker 3. 执行以下操作并进行使用 四、在Docker上安装nginx 一、Docker介绍 Docker&#xff1a;是给予Go语言实现的开源项…