微信小程序导航条配置图片背景

最新推荐文章于 2023-06-14 14:04:20 发布

abaabahualala

最新推荐文章于 2023-06-14 14:04:20 发布

阅读量972

点赞数 2

文章标签：微信小程序小程序微信 Powered by 金山文档

原文链接：https://www.cnblogs.com/suwanbin/p/15176561.html

版权

最终效果展示

实现过程

单页面.json

{
  "usingComponents": {},
  "navigationStyle": "custom" 
}

.wxml

<!--pages/home/home.wxml-->
<view class="pageContainer">
    <!-- 背景 -->
    <image class="navBg" mode="widthFix" src="/image/背景/微信图片_20230114171129.png"></image>
</view>
<view class="try">
    123
</view>

.wxss

.navBg {
  width: 100%;
  position: absolute; /* 使用 z-index 调整上下层级需要脱离文档流 */
  top: 0;
  z-index: -100; /* z-index 设低一点，让页面元素可以覆盖它 */
}
.try{
  width: 50%;
  height: 50%;
  margin-top: 50%;
  margin-left: 25%;
  background-color: antiquewhite;
}