全国服务热线:4008-888-888

公司新闻

手机微信微信小程序——自定导航栏栏

  可是有时候候大家新项目要求将会必须自定头顶部导航栏栏,以下图所显示:   如今实际说一下完成流程及应用方式: 1.在 app.json 里边把 "navigationStyle" 设定为 "custom" 那样子以后就总是保存右上方胶囊按键了。   2.测算有关值 由于不在同的手机上型号规格头顶部那一条频道高宽比将会不一致,因此以便大家兼容大量型号规格,大家必须测算3个值: 以下图: 1. 全部导航栏栏的高宽比; 2. 胶囊按键与顶端的间距; 3. 胶囊按键与右边的间距。 微信小程序能够根据 wx.getMenuButtonBoundingClientRect() 获得胶囊按键的信息内容  和 wx.getSystemInfo() 获得机器设备信息内容。 以下图: 根据这种信息内容大家能够测算出上边说的3个值: 1. 全部导航栏栏高宽比 = statausBarHeight + height + (top-statausBarHeight )*2; 2. 胶囊按键与顶端的间距 = top; 3.胶囊按键与右边的间距 = windowWidth - right。   App.js 编码以下:
success: res = { let statusBarHeight = res.statusBarHeight, navTop = menuButtonObject.top,//胶囊按键与顶端的间距 navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航栏高宽比 this.globalData.navHeight = navHeight; this.globalData.navTop = navTop; this.globalData.windowHeight = res.windowHeight; fail(err) { console.log(err); }) 复制代码
 view view wx:if="{{showNav}}" ss-icon name="back" color="{{iconColor}}" size="15px" block="{{true}}" bind:click="_navBack" /ss-icon ss-icon name="index" color="{{iconColor}}" size="15px" block="{{true}}" bind:click="_toIndex" /ss-icon /view view {{pageName}} /view /view 
复制代码
/* components/navbar/index.wxss */ .navbar { width: 100%; overflow: hidden; position: relative; top: 0; left: 0; z-index: 10; flex-shrink: 0;
} .navbar-title { width: 100%; box-sizing: border-box; padding-left: 115px; padding-right: 115px; height: 32px; line-height: 32px; text-align: center; position: absolute; left: 0; z-index: 10; color: #333; font-size: 16px; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
} .navbar-action-wrap { display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: absolute; left: 10px; z-index: 11; line-height: 1; padding-top: 4px; padding-bottom: 4px;
} .navbar-action-group { border: 1px solid #f0f0f0; border-radius: 20px; overflow: hidden;
} .navbar-action_item { padding: 3px 0; color: #333;
} .navbar-action-group .navbar-action_item { border-right: 1px solid #f0f0f0; padding: 3px 14px;
} .navbar-action-group .last { border-right: none;
}
复制代码

ss-icon 就是我自定的一个 icon 部件,点一下查询。 假如你沒有这一部件,能够在我应用 ss-icon /ss-icon 的地区换为 view /view 部件,随后里边放进你的标志便可以了。 针对部件不太搞清楚的,能看下手机微信微信小程序部件有关部件的详细介绍。   部件已建立结束,如今说下这种情况件的应用方式: 假定大家必须在index.wxml中必须启用这一部件, 1.在index.json中引入这种情况件:
 view navbar page-name="你当今网页页面的姓名" /navbar view !--这儿放你的內容-- /view /view 
复制代码


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服