uni-app 设置页面背景颜色有效办法
uni-app 2021-07-19 14:06:03

在基于 uni-app 的应用开发过程中我们经常需要设置页面的背景颜色，因各个平台有所差异，将每个平台的设置方法分享给大家

app端（vue 及 nvue）

JavaScript Code复制内容到剪贴板
  1. // 通过 page.json 来设置页面背景颜色  
  2. {  
  3.     "path" : "pages/9.templates/shop/coupons",  
  4.     "style" :                                                                                      
  5.     {  
  6.         "navigationBarTitleText": "优惠券组件",  
  7.         "app-plus" : {  
  8.             "background":"#F8F8F8"  
  9.         }  
  10.     }  
  11. }  

 

 

H5端

JavaScript Code复制内容到剪贴板
  1. // 通过 外层 view 样式设置  
  2. // 官方文档的配置方式无效  
  3. <template>  
  4.     <view class="gui-padding page-bg">  
  5.         <view>  
  6.             <text class="gui-h5 gui-color-gray">组件演示</text>  
  7.         </view>  
  8.     </view>  
  9. </template>  
  10. <script>  
  11. export default {  
  12.     data() {  
  13.         return {  
  14.               
  15.         }  
  16.     },  
  17. }  
  18. </script>  
  19. <style>  
  20. /* #ifdef MP */  
  21. page{background:#F8F8F8;}  
  22. /* #endif */  
  23. /* #ifdef H5 */  
  24. .page-bg{min-height:100vh; background-color:#F8F8F8;}  
  25. /* #endif */  
  26. </style>  

 

小程序端

JavaScript Code复制内容到剪贴板
  1. // 通过 style 来设置页面背景颜色  
  2. /* #ifdef MP */  
  3. page{background:#F8F8F8;}  
  4. /* #endif */  
  5. </style>  

 

 

 

本文来自于：http://www.yoyo88.cn/study/uniapp/582.html

上一篇 OPPO开放平台移动应用认领
下一篇 app左滑旋转后消失
相关的文章
Powered by yoyo苏ICP备15045725号