-
创建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>
- title :中间区域的标题信息
- showBack :是否显示返回按钮
微信小程序-自定义简易顶部导航
勿语&2024-03-11 11:11
相关推荐
前端太佬2 小时前
小程序登录与授权功能全解析:从原理到设计的实战指南 (2025年最新规范实践版)说私域3 小时前
颠覆传统微商!开源AI智能名片链动2+1模式S2B2C商城小程序:重构社交电商的“降维打击”革命ai大佬4 小时前
我是如何用AI编程制作一个AI表情包生成的小程序2401_890665864 小时前
免费送源码:Java+ssm+HTML 三分糖——甜品店网站设计与实现 计算机毕业设计原创定制Maitians5 小时前
微信小程序 - 根据经纬度打开导航前端太佬5 小时前
微信小程序支付全流程实战指南(Node.js后端篇)xuanjiong7 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片天_真好14 小时前
小程序知识点总结1gurenchang15 小时前
实现从一个微信小程序跳转到另一个微信小程序编程毕设18 小时前
【含文档+PPT+源码】基于微信小程序的校园快递平台