微信小程序自定义页面标题

wxml: 建议封装成组件以便使用

<view class="nav" style='height:{{customObj.navTop}}px;'></view> //设置状态栏高度
<view class='title' style="line-height:{{ customObj.jiaoH }}px"> //设置标题<i class="back" bindtap="back"style="background: url('/static/newquestion/arrow-left.png') no-repeat center"></i>食材详情
</view>

json：

{"navigationBarTitleText": "","navigationStyle": "custom",  //关键"usingComponents":{"cart": "../../components/cart/cart","make-model": "../../components/make-model/make-model","fit-tab": "../../components/fit-tab/fit-tab"}
}

js:


//js
data:{customObj: {}, //new},
onLoad: function (options) {let menuButtonObject = wx.getMenuButtonBoundingClientRect() //获取到右上角胶囊的布局位置信息wx.getSystemInfo({success: res => {let statusBarHeight = res.statusBarHeight,navTop = menuButtonObject.top,//胶囊按钮与顶部的距离navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;//导航高度this.setData({customObj: { navHeight, navTop, windowHeight: res.windowHeight, jiaoH: menuButtonObject.height, sysHeight: res.windowHeight }})},fail(err) {console.log(err);}})},

微信小程序自定义页面标题相关推荐

微信小程序分享页面标题出现乱码
微信小程序分享页面标题出现乱码这是我在需要分享的页面中设置的自定义title 数据是从上个页面传过来的这是打印出来的title 解决方法:decodeURI(options.title)
微信小程序自定义头部标题导航栏
/*** 微信小程序头部自定义标题导航栏* * 参数:* pageTitle: 导航栏标题,默认不显示* navColor: 导航栏背景颜色,默认白色,透明为'transparent'属性值* noS ...
微信小程序自定义分享标题和图片
微信小程序当中有两种分享的方式 1.按钮方式<button open-type="share"></button> 2.右上方的"..." ...
微信小程序设置页面标题
在json文件中设置 {"navigationBarTitleText": "页面标题" } 在js文件中设置 wx.setNavigationBarTitle ...
微信小程序自定义页面Title
app.js // app.js App({onLaunch() {const that = this;// 获取系统信息const systemInfo = wx.getSystemInfoSync ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...
微信小程序-自定义导航栏及返回上一级页面的实现
一.参考文章 1.微信小程序自定义navigationBar 2.微信小程序返回上一级页面的实现代码 3.小程序开发--常用布局二.需求在导航栏中需要显示信息的"未读数量",所 ...
标题微信小程序提示页面未注册问题解决
标题微信小程序提示页面未注册问题解决 1.出现的问题在WXML部分编译完成后页面可以正常显示样式,然而在.js文件编辑完成后进行编译时会出现如下错误提示: 2.出现的原因及解决方法 .JS文件中缺少 ...

微信小程序自定义页面标题

微信小程序自定义页面标题相关推荐

最新文章

热门文章