微信小程序-自定义简易顶部导航

勿语&2024-03-11 11:11

创建component文件夹
创建navigation文件夹，创建navigation组件

navigation.json

bash 复制代码

{
  "component": true,
  "usingComponents": {}
}

navigation.wxml

bash 复制代码

<view class="navigation">
  <van-icon wx:if="{{showBack}}" custom-class="left" name="arrow-left" color="black" size="22" bind:tap="back"/>
  <text class="center">{{title}}</text>
</view>

navication.scss

bash 复制代码

.navigation{
  display: flex;
  height: 130rpx;
  background-color:#ffffff;
  padding-top: 20rpx;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid #ebfeca;
  .left{
    position: absolute;
    left: 10rpx;
  }
  .center{
    margin-top: 55rpx;
  }
}

navigation.js

bash 复制代码

// component/navigation.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:"标题"
    },
    showBack:{
      type:Boolean,
      value:false
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    back(){
      wx.navigateBack()
    }
  }
})

组件的使用
bash 复制代码
```
<navigation showBack title="个人信息"></navigation>
```
1. title ：中间区域的标题信息
2. showBack ：是否显示返回按钮