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>