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

1. 创建component文件夹

2. 创建navigation文件夹，创建navigation组件

3. navigation.json

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

4. navigation.wxml

   <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>

5. navication.scss

   .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;
     }
   }

6. navigation.js

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

7. 组件的使用

   <navigation showBack title="个人信息"></navigation>

   1. title ：中间区域的标题信息
   2. showBack ：是否显示返回按钮