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 + "%;"; },