uni+uview 实现切换账号

本文介绍了一种在uni-app中实现用户登录后账号信息的缓存管理方法,并通过使用u-picker组件实现了账号的切换功能。

先说思路
1.我们需要把每次登录后获取的账号存到缓存里
2.判断缓存是否有值,没有值直接存,有值则须判断是否重复,不重复在存到数组里
3.把得到的数组再存到缓存里
4.既然需要判断缓存是否有值,那么就需要先从缓存取值,所以就需要把第一步换成从缓存取值
5.直接给切换需要的数组赋值
上代码

var cdd = uni.getStorageSync("cdd")//从缓存取值
					console.log("取值" + cdd)
					if (cdd) {//缓存有值
						cdd = JSON.parse(cdd);//字符串转数组对象
						console.log(cdd)
						var bool1 = cdd.some(item => item.username == obj.account)//判断是否重复true重复false不重复
						console.log(bool1)
						if (!bool1) {//如果不重复则往数组push
							cdd.push({
								"username": list.account//这个值为动态值,登录后的账号
							})
						}
					} else {//缓存没值,直接把账号赋值
						cdd = [{
							"username": list.account//这个值为动态值,登录后的账号
						}]
					}
					console.log(cdd);
					uni.setStorageSync("cdd", JSON.stringify(cdd))//转换字符串存储到缓存里(缓存的数据类型为字符串)

在这里插入图片描述
然后在我们需要切换的

<button type="default" @click="show = true">切换账号</button>
		<u-picker :show="show" :columns="column" @confirm="confirm" @cancel="cancel" keyName="username"></u-picker>
data() {
			return {
				show: false,
				column: [JSON.parse(uni.getStorageSync("cdd"))]		
					}
		},
methods: {
			confirm(e) {
				this.selectname = e.value[0].username
				this.login()//调用登录的方法传值
				console.log('confirm', e.value[0].username)
			},

在这里插入图片描述

要使用uni-app和uview-plus通过底部导航栏实现页面切换,可按以下步骤操作。 ### 1. 引入uview-plus 确保项目中已引入uview-plus,具体可查看 uview-plus官网 👉 Tabbar 底部导航栏 网站:Tabbar 底部导航栏 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 [^1]。 ### 2. 配置底部导航栏 在`pages.json`文件中配置底部导航栏信息,示例如下: ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/mine/mine", "style": { "navigationBarTitleText": "我的" } } ], "tabBar": { "color": "#7A7E83", "selectedColor": "#007aff", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home_active.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/tabbar/mine.png", "selectedIconPath": "static/tabbar/mine_active.png" } ] } } ``` ### 3. 创建页面 根据`pages.json`中配置的页面路径,创建对应的页面文件,例如`pages/index/index.vue`和`pages/mine/mine.vue`。 ### 4. 页面切换功能 底部导航栏会自动根据用户点击切换页面,无需额外编写代码。用户点击底部导航栏的不同项时,会自动跳转到对应的页面。 ### 示例代码 以下是一个简单的页面示例: ```vue <!-- pages/index/index.vue --> <template> <view> <text>这是首页</text> </view> </template> <script setup> // 页面逻辑 </script> <style scoped> /* 页面样式 */ </style> ``` ```vue <!-- pages/mine/mine.vue --> <template> <view> <text>这是我的页面</text> </view> </template> <script setup> // 页面逻辑 </script> <style scoped> /* 页面样式 */ </style> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值