当前位置：首页 > news >正文

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

news 2025/7/7 6:41:08

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

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