前端 - 小程序单个页面顶部导航栏设置边框？

Question

例如：

Answer 1

如果只要求对该页面生效，且不进行导航栏自定义设置。

可以在该页面顶部新增一个空白 div 标签，样式如下：

.div {
  width: 100vw;
  height: 1px;
  background-color: #DAF1ED; // 更改为所需要的颜色
  position: fixed;
  top: 0;
  left: 0;
}

Answer 2

给这个页面加个div, 然后定位为fixed, top 为0 , div高1px, width是100vw, 背景色就是UI图的颜色就行了

Answer 3

1、创建navbar组件
navbar.js文件代码如下:

const app = getApp()
Component({
  properties: {
    navbarData: {   //navbarData   由父页面传递的数据，变量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) {}
    }
  },
  data: {
    height: '',
    //默认值  默认显示左上角
    navbarData: {}
  },

  attached: function () {
    // 定义导航栏的高度   方便对齐
    this.setData({
      height: app.globalData.height
    })
  },
}) 

navbar.json代码如下：

{
  "component": true,
  "usingComponents": {
    "van-nav-bar": "@vant/weapp/nav-bar/index"

  }
}

navbar.wxml代码如下：

<view class="nav-wrap">
    <!-- // 导航栏 中间的标题 -->
    <van-nav-bar
        title-class="{{navbarData.isIndex?'nav-title':''}}"
        z-index="6"
        border="{{navbarData.border==false?navbarData.border:true}}"
        custom-style="background-color:{{navbarData.backgroundColor?navbarData.backgroundColor:'#fff'}}"
        fixed
        title="{{navbarData.title}}"
        bind:click-left="onClickLeft"
        bind:click-right="onClickRight"
    >
    </van-nav-bar>
</view>

navbar.wxss代码如下：

.nav-title {
    color: #fff;
}

2、在需要自定义导航栏的页面下设置如下（例如login登录页）
（1）在app.js中主要代码如下：

onLaunch() {
            wx.getSystemInfo({
                success: (res) => {
                  this.globalData.height = res.statusBarHeight
                }
           })

      },

（2）login.js主要代码如下：

 data: {
        navbarData: {
            title: "账号绑定", //导航栏 中间的标题
        },
        height: app.globalData.height * 2 + 20
  }

(3)login.json主要代码如下：

{
  "navigationStyle": "custom",
  "usingComponents": {
     "nav-bar": "../../components/navbar/navbar"
  }
}

(4)login.wxml主要代码如下：

<view class="container">
    <view>
      <nav-bar navbar-data="{{navbarData}}"></nav-bar>
      <view style="margin-top: {{height}}px"></view>
    </view>
</view>