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

 

uni-app 真机背景色未改变

　　需要单独写一个 style ,或者移除 style 中的 scoped ，添加 scoped 则不生效

<style>
    page{
        background-color:#f00;
    }
</style>
<style lang="scss" scoped>
　　/*Your Css Style*/
</style>