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

  1. 创建component文件夹

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

  3. navigation.json

    bash 复制代码
    {
      "component": true,
      "usingComponents": {}
    }
  4. 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>
  5. 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;
      }
    }
  6. navigation.js

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

    bash 复制代码
    <navigation showBack title="个人信息"></navigation>
    1. title :中间区域的标题信息
    2. showBack :是否显示返回按钮
相关推荐
数字游民952714 小时前
推荐一个自带流量加成的小程序接口
人工智能·ai·小程序
2501_9159090615 小时前
Charles 抓不到包怎么办?iOS 调试过程中如何判断请求路径
android·ios·小程序·https·uni-app·iphone·webview
2501_9160074715 小时前
iOS和iPadOS文件管理系统全面解析与使用指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214320 小时前
iOS App 开发阶段性能优化,观察 CPU、内存和日志变化
android·ios·性能优化·小程序·uni-app·iphone·webview
qq_124987075320 小时前
基于微信小程序的垃圾分类信息系统(源码+论文+部署+安装)
java·前端·spring boot·后端·微信小程序·小程序·计算机毕业设计
qq_124987075320 小时前
基于微信小程序的照片社交平台(源码+论文+部署+安装)
java·大数据·微信小程序·小程序·毕业设计·计算机毕业设计
Focussend智能化营销21 小时前
【无标题】重构增长链路:如何将企业小程序从“成本中心”,改造为“利润中心”?
人工智能·小程序·重构·自动化·内容运营·数字化营销
游戏开发爱好者821 小时前
在 iOS 开发、测试与上架过程中 如何做证书管理
android·ios·小程序·https·uni-app·iphone·webview
计算机毕设指导621 小时前
基于微信小程序的健康管理系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea
计算机毕设指导621 小时前
基于微信小程序的电影评论与推荐社区平台【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea