自建免费的网站—微信小程序自定导航条组件代

2021-04-07 04:08

今天有网友问及相仿手机微信微信小程序的自定导航栏栏条怎样做，话其实不是多讲，还模糊不清白的朋友，大伙儿一起来看一下实例。

最开始将手机微信微信小程序的导航栏栏条设置为自定状况，在app.json里把navigationStyle特点设置为custom

在文本文档区中建八局立本身的构件

json：

 component : true,
 usingComponents : {}
}

wxml:

 top: 0;
 background: url( mianmianyue.oss-cn-shenzhen.aliyuncs/images%2Fapp%2Fcomponents%2Ficon-headop.png ) no-repeat center center;
 background-size: 174rpx auto;
page .main .wrapper .bg .head .left i {
 display: block;
 height: 64rpx;
 width: 80rpx;
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1001;
page .main .wrapper .bg .head .left label {
 display: block;
 height: 64rpx;
 width: 80rpx;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 1001;
page .main .wrapper .bg .head .edit {
 background: url( mianmianyue.oss-cn-shenzhen.aliyuncs/images%2Fapp%2Fcomponents%2Ficon-editopbg.png ) no-repeat center center;
 background-size: 174rpx auto;
page .main .wrapper .bg .head .home {
 width: 87rpx;
 background: url( mianmianyue.oss-cn-shenzhen.aliyuncs/images%2Fapp%2Fcomponents%2Ficon-goHomePage.png ) no-repeat center center;
 background-size: 87rpx auto;
page .main .wrapper .bg .head .headContent {
 display: inline-block;
 vertical-align: top;
page .main .wrapper .bg .head .headContent label {
 display: block;
 font-size: 36rpx;
 max-width: 340rpx;
 height: 65rpx;
 text-align: center;
 line-height: 65rpx;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
page .main .wrapper .bg .head .headContent .search {
 width: 300rpx;
 height: 65rpx;
 border-radius: 32rpx;
 background: #fafafa;
 position: relative;
page .main .wrapper .bg .head .headContent .search::before {
 content: 
 width: 31rpx;
 height: 65rpx;
 display: inline-block;
 vertical-align: top;
 background: url( mianmianyue.oss-cn-shenzhen.aliyuncs/images%2Fapp%2Fcomponents%2Ficon-search.png ) no-repeat center center;
 background-size: 31rpx auto;
 margin-right: 10rpx;
page .main .wrapper .bg .head .headContent .search label {
 display: inline-block;
 vertical-align: top;
 height: 65rpx;
 font-size: 28rpx;
 color: #999999;
 line-height: 65rpx;
page .main .wrapper .bg .head .headContent .search i {
 width: 300rpx;
 height: 65rpx;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
page .main .wrapper .bg .head .headContent .address {
 text-align: center;
 max-width: 340rpx;
 height: 65rpx;
 position: relative;
page .main .wrapper .bg .head .headContent .address::after {
 content: 
 display: inline-block;
 vertical-align: top;
 width: 23rpx;
 height: 65rpx;
 background: url( mianmianyue.oss-cn-shenzhen.aliyuncs/images/app/faceToFace/index/icon-bottom.png ) no-repeat center center;
 background-size: 23rpx auto;
 margin-left: 10rpx;
page .main .wrapper .bg .head .headContent .address::before {
 content: 
 display: inline-block;
 vertical-align: top;
 height: 65rpx;
 width: 28rpx;
 background: url( mianmianyue.oss-cn-shenzhen.aliyuncs/images/app/faceToFace/index/icon-addr.png ) no-repeat center center;
 background-size: 28rpx auto;
 margin-right: 10rpx;
page .main .wrapper .bg .head .headContent .address label {
 max-width: 200rpx;
 display: inline-block;
 vertical-align: top;
 height: 65rpx;
 line-height: 65rpx;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
page .main .wrapper .bg .head .headContent .address i {
 width: 100%;
 height: 65rpx;
 position: absolute;
 top: 0;
 left: 0;
}

js:

const app = getApp()
Component({
 * 构件的特点文件目录
 properties: {
 mode: {
 type: string ,
 value: default 
 url: {
 type: string ,
 value: 
 headStyle: {
 type: string ,
 value: background: #ffffff;color: #111111; 
 isEditHeadBg: {
 type: boolean ,
 value: false
 delta:{
 type: number ,
 value:1
 * 构件的初始数据信息信息内容
 data: {
 statusBarHeight: app.globalData.statusBarHeight,
 isHaveParent: true
 * 构件性命周期时间時间涵数，在构件实例进入网页页面网页页面联接点树时推行
 attached: function () {
 var self = this;
 var page = app.getParentPage();
 var isHaveParent = self.data.isHaveParent;
 if (page) {
 isHaveParent = true;
 } else {
 isHaveParent = false;
 self.setData({
 isHaveParent
 * 构件的方法文件目录
 methods: {
 ontap: function () { 
 var delta=this.data.delta
 wx.navigateBack({
 delta
 goHome: function () {
 wx.reLaunch({
 url: /pages/home/index ,

 that.globalData.sdkVersion = res.SDKVersion
 that.globalData.iPhoneX = res.model.indexOf( iPhone X ) = 0
 that.globalData.mobileName = res.model;
 that.globalData.statusBarHeight = res.statusBarHeight;
 })

wx.getSystemInfo()能够得到取得机的关键主要参数，获得statusBarHeight就是能动态性性的适配刘海屏的高度了。
[标识:內容1]

最后可以在务必的网页页面网页页面或者app.json中进行再加引进构件就可以了了。以上就是手机上手机微信手机微信微信小程序自定导航栏栏条构件实例编号案例实例教程，很多技术性性案例实例教程尽在。