uni-app相关

uni-app 中以下组件的高度是固定的，不可修改：

导航栏高度固定为 44px
tabBar 高度固定为 56px

状态栏比较特殊，是一个变量

.status_bar{height: var(--status-bar-height);width: 100%;
}

 

 

uni-app 使用 vue/cli 创建项目的时候，如果使用 scss 语法，在正常安装 node-sass 和 sass-loader 之后编译依然出错

解决办法

npm i sass-loader@7.3

降低 sass-loader 的版本即可

也可以选择另外一种解决方案，使用 stylus ，和 uni-app 无冲突。

 

 

自定义导航条——解决内容展示在状态栏的问题

　　下面是 CSS，背景色请根据自己的需求设置，我这边是需要展示全页面的背景图。

.bararea {position: relative;.barfixed {position: fixed;width: 100%;left: 0;top: 0;z-index: 998;}
}.status_bar {height: var(--status-bar-height);width: 100%;
}.nav_bar {position: relative;z-index: 999;background: transparent;
}

　　下面是 HTML

<!-- #ifdef APP-PLUS -->
<view class="bararea"><view class="barfixed"><view class="status_bar"><!-- 这里是状态栏 --></view><view class="nav_bar"><!-- 这里是导航栏 --></view></view><view class="barplaceholder"><view class="status_bar"><!-- 这里是状态栏 --></view><view class="nav_bar"><!-- 这里是导航栏 --></view></view>
</view>
<!-- #endif -->

 

在 uni-app 中，Vuex 里面的数据在 h5 可以正常访问，但是在真机上访问失败。

　　打印值看到 $store 为 unidentified ，看文章后发现需要把 store 挂载在 Vue 的 prototype 上面，在 main.js 中引入

import store from './store/index.js'

Vue.prototype.$store=store

const app = new Vue({store,...App
})
app.$mount()

 

 

uni-app 真机不支持 v-show 。

 

uni-app 真机不支持 :style 动态改变元素宽高的问题

<view :class="['jindu',item.GenStatus===2?'done':'']" :style="forMatWidth(item)"></view>

forMatWidth(data) {return "width:"+(data.GenUsed / data.GenTotal) * 100 + "%;";
},

　　使用上面这种方式，在 h5 平台生效， app 不生效。

　　修复版本

<view :class="['jindu',item.GenStatus===2?'done':'']" :style="{width:forMatWidth(item)}"></view>

forMatWidth(data) {return (data.GenUsed / data.GenTotal) * 100 + "%;";
},