网站建设咨询服务,毕业设计代做网站推荐,公主岭市住房和城乡建设局网站,泰安网络科技有限公司电话1.关于权限不同tabbar处理
uniapp 实现不同用户展示不同的tabbar(底部导航栏)_uniapp tabbar-CSDN博客
但是里面还有两个问题 一个是role应该被本地存储并且初始化 第二个问题是假设我有3个角色 每个角色每个tabbar不一样的#xff0c;点击tabbar时候会导致错乱 第三个问题…1.关于权限不同tabbar处理
uniapp 实现不同用户展示不同的tabbar(底部导航栏)_uniapp tabbar-CSDN博客
但是里面还有两个问题 一个是role应该被本地存储并且初始化 第二个问题是假设我有3个角色 每个角色每个tabbar不一样的点击tabbar时候会导致错乱 第三个问题 需要监听角色变化
问题处理 在vuex的时候为role初始化
role: uni.getStorageSync(role) || null, // 从本地存储获取初始值 第二个问题 让传送过来的值selectIndexindex 表示选中 第三个问题监听
templateview classtabview v-for(item,index) in list :keyindex classtab-item clickswitchTab(item, index)image classtab_img :srcselectedIndex index ? item.selectedIconPath : item.iconPath/imageview classtab_text :style{color: selectedIndex index ? selectedColor : color}{{item.text}}/view/view/view
/templatescriptimport {mapState} from vuexexport 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: 个人中心}]}}}}
/scriptstyle langscss.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 labelPositionleft :modelmodel :rulesrules refuForm classformsu-form-item propuseru--input v-modelmodel.user bordernone placeholder请输入手机号 clearableclassu-input__content color#fff/u--input/u-form-itemu-form-item proppasswordu--input v-modelmodel.password bordernone placeholder请输入密码 password clearableclassu-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 和onshowonload,computed 谁快
在 UniApp 中created 和 mounted 是组件的生命周期钩子而 onLoad 和 onShow 是页面的生命周期钩子。一般来说created 在组件实例被创建时调用mounted 在组件挂载后调用通常都在页面加载前。onLoad 在页面加载时调用而 onShow 在页面每次显示时调用。所以created 和 mounted 通常比 onLoad 和 onShow 更早执行。至于 computed它们是计算属性会在数据变化时更新所以执行时机依赖于数据的变化。
created(会在组件实例化时立即执行)computed(属性会在组件的创建和更新阶段自动重新计算)onshow(只有在组件被显示时才会被调用)
