微信小程序的自定义头部 |
您所在的位置：网站首页 › 微信搜索栏怎么设置 › 微信小程序的自定义头部 |
微信小程序的自定义头部
|
1.要用自定义的导航栏首先要在app.json中配置 navigationStyle "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#14cb6b", "navigationBarTitleText": "TitleText", "navigationBarTextStyle": "white", "navigationStyle":"custom" }
2.公用头部组件（目前微信小程序不支持单个页面设置，一旦在要决定使用自定义导航栏） 现在支持单个页面设置自定义头部了，在页面json文件里配置
index.js文件 const app = getApp() Component({ properties: { navbarData: { //navbarData 由父页面传递的数据，变量名字自命名 type: Object, value: {}, observer: function (newVal, oldVal) { } } }, data: { height: '', inputValue: '' }, attached: function () { // 定义导航栏的高度 方便对齐 this.setData({ height: app.globalData.height }) }, methods: { // 返回上一页面 _navback() { wx.navigateBack() }, // 搜索功能 search: function (e) { this.triggerEvent("search", e.detail.value) }, // 清空搜索框 clearInput:function(){ this.setData({ inputValue:'' }) } } })index.html文件 通用头部 包含三个部分：返回按钮（back），title（title）和搜索框（search） 分别通过父组件的传值进行判断时候显示。 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |