微信小程序背景图片的设置(mode模式),tab栏以及自定义导航栏消失

梦想不抛弃苦心追求的人,只要不停止追求,你们会沐浴在梦想的光辉之中。再美好的梦想与目标,再完美的计划和方案,如果不能尽快在行动中落实,最终只能是纸上谈兵,空想一番。只要瞄准了大方向,坚持不懈地做下去,才能够扫除挡在梦想前面的障碍,实现美好的人生蓝图。微信小程序细碎知识点(一) 背景图片的设置(mode模式),tab栏以及自定义导航栏消失,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

最近在弄微信小程序,把开发过程中遇到的问题和细碎知识点记录下来,方便查询

一、有关Tabbar和导航栏的知识

  1. 在所有页面让顶部导航栏消失:在app.json中添加 “navigationStyle”:“custom”
    自定义某个页面A让导航栏消失,其他页面导航栏存在,则在A.json中添加”navigationStyle”:“custom” ,
    app.json中添加 “navigationStyle”:“default”
  2. Tabbar中最多5个子项,最少2个子项,有属性:
    “color”
    “backgroundColor”
    “selectedColor”
    “borderStyle”(只有white/black)

二、背景图片的设置

注意:不能直接在wxss中直接添加本地图片,会报错!!!
方法
1.将本地图片用Base64转码,(但一般转码后的代码会很长)
2.在wxml中使用image标签
image的mode模式:
微信小程序背景图片的设置(mode模式),tab栏以及自定义导航栏消失 微信小程序背景图片的设置(mode模式),tab栏以及自定义导航栏消失
在wxml中:

<view class="container">
 <image class='background' src="../../iamges/background.jpg" mode="aspectFill"/>
</view>

在wxss中:

.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;//可以让背景图置于最底层,不影响其他操作
}

背景图片透明度设置: 给image标签添加opacity属性 值为0-1

<image style="opacity={{1}}"/>  //要用{{}}

3.用网上的在线图片网址

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/150458.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!