uni-app相关
<h2>uni-app 中以下组件的高度是固定的，不可修改：</h2><p>导航栏高度固定为 44px<br>tabBar 高度固定为 56px</p>
<p>状态栏比较特殊，是一个变量</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">.status_bar{
height: </span><span style="color: rgba(0, 0, 255, 1)">var</span>(--status-bar-<span style="color: rgba(0, 0, 0, 1)">height);
width: </span><span style="color: rgba(128, 0, 128, 1)">100</span>%<span style="color: rgba(0, 0, 0, 1)">;
}</span></pre>
</div>
<p> </p>
<p> </p>
<h2>uni-app 使用 vue/cli 创建项目的时候，如果使用 scss 语法，在正常安装 node-sass 和 sass-loader 之后编译依然出错</h2>
<p>解决办法</p>
<div class="cnblogs_code">
<pre>npm i sass-loader@<span style="color: rgba(128, 0, 128, 1)">7.3</span></pre>
</div>
<p>降低 sass-loader 的版本即可</p>
<p>也可以选择另外一种解决方案，使用 stylus ，和 uni-app 无冲突。</p>
<p> </p>
<p> </p>
<h2>自定义导航条——解决内容展示在状态栏的问题</h2>
<p> 下面是 CSS，背景色请根据自己的需求设置，我这边是需要展示全页面的背景图。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.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;
}
</pre>
</div>
<p> 下面是 HTML</p>
<div class="cnblogs_code">
<pre><!-- #ifdef APP-PLUS -->
<view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">bararea</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">barfixed</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">status_bar</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<!-- 这里是状态栏 -->
</view>
<view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">nav_bar</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<!-- 这里是导航栏 -->
</view>
</view>
<view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">barplaceholder</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">status_bar</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<!-- 这里是状态栏 -->
</view>
<view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">nav_bar</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<!-- 这里是导航栏 -->
</view>
</view>
</view>
<!-- <span style="color: rgba(0, 0, 255, 1)">#endif</span> --></pre>
</div>
<p> </p>
<h2>在 uni-app 中，Vuex 里面的数据在 h5 可以正常访问，但是在真机上访问失败。</h2>
<p> 打印值看到 $store 为 unidentified ，看文章后发现需要把 store 挂载在 Vue 的 prototype 上面，在 main.js 中引入</p>
<div class="cnblogs_code">
<pre>import store <span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">./store/index.js</span><span style="color: rgba(128, 0, 0, 1)">'</span></pre>
</div>
<div class="cnblogs_code">
<pre>Vue.prototype.$store=store</pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">const</span> app = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Vue({
store,
...App
})
app.$mount()</span></pre>
</div>
<p> </p>
<p> </p>
<h2>uni-app 真机不支持 v-show 。</h2>
<p> </p>
<h2>uni-app 真机不支持 :style 动态改变元素宽高的问题</h2>
<div class="cnblogs_code">
<pre><view :<span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">['jindu',item.GenStatus===2?'done':'']</span><span style="color: rgba(128, 0, 0, 1)">"</span> :style=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">forMatWidth(item)</span><span style="color: rgba(128, 0, 0, 1)">"</span>></view></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">forMatWidth(data) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">width:</span><span style="color: rgba(128, 0, 0, 1)">"</span>+(data.GenUsed / data.GenTotal) * <span style="color: rgba(128, 0, 128, 1)">100</span> + <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">%;</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">;
},</span></pre>
</div>
<p> 使用上面这种方式，在 h5 平台生效， app 不生效。</p>
<p> 修复版本</p>
<div class="cnblogs_code">
<pre><view :<span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">['jindu',item.GenStatus===2?'done':'']</span><span style="color: rgba(128, 0, 0, 1)">"</span> :style=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">{width:forMatWidth(item)}</span><span style="color: rgba(128, 0, 0, 1)">"</span>></view></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">forMatWidth(data) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> (data.GenUsed / data.GenTotal) * <span style="color: rgba(128, 0, 128, 1)">100</span> + <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">%;</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">;
},</span></pre>
</div>
<p> </p>
<h2>uni-app 真机背景色未改变</h2>
<p> 需要单独写一个 style ,或者移除 style 中的 scoped ，添加 scoped 则不生效</p>
<div class="cnblogs_code">
<pre><style><span style="color: rgba(0, 0, 0, 1)">
page{
background</span>-<span style="color: rgba(0, 0, 0, 1)">color:#f00;
}
</span></style><br><style lang="scss" scoped><br> /*Your Css Style*/<br></style></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/gitByLegend/p/11447155.html
頁:
[1]