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

时间：2024-09-30 07:03:30

1.关于权限不同tabbar处理

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

但是里面还有两个问题 一个是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 index
				default: 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) {
					//角色1
					this.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) {
					//角色2
					this.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 样式丢失-****博客

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="请输入手机号" clearable
							class="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 clearable
							class="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(只有在组件被显示时才会被调用)

相关文章