微信公众号开发服务

SEO优化-搜狗360搜索引擎营销推广

小法度榜样顶部导航栏,小法度榜样顶部导航栏标题不居中

smile 2022-11-11 微信公众号开发服务 16 views 0

今天给各位分享小程序顶部导航栏的知识,其中也会对小程序顶部导航栏标题不居中进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

微信小法度榜样自定义导航栏兼容适配所有机型

blockquotep今朝小法度榜样已在前端占了一席之地,比来公司项目上用的就是小法度榜样开辟,因为功能及页面不是很多,所以直接原生开辟,毕竟坑可能会少点,在开辟过程中,小法度榜样自带导航栏和客户的设计稿导航栏排在一路,感到很别扭,是以请求去掉落微信的自带导航栏,微信供给了这方面的api,接下来我们就实操。/p/blockquotediv class="image-package"img src=" " img-data="{"format":"jpeg","size":14897,"height":141,"width":963}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/

/divpspan style="font-size:15px"这是小法度榜样官方文档截图,可以看到导航栏样式支撑两种,默认是带导航栏,别的一种是自定义导航栏-custom,假如应用自定义导航栏,我们可以/span/ppstrongspan style="font-size:15px"全局设备/span/strongspan style="font-size:15px"//pspan style="font-size:inherit"//app.json/span

span style="font-size:inherit""window"/span: {

span style="font-size:inherit""navigationStyle"/span: span style="font-size:inherit""custom"/span

}

pstrongspan style="font-size:15px"单页面设备/span/strong/pspan style="font-size:inherit"//page.json/span

{

span style="font-size:inherit""navigationStyle"/span: span style="font-size:inherit""custom"/span

}

pstrongspan style="font-size:15px"后果比较/span/strong

/pdiv class="image-package"img src=" " img-data="{"format":"jpeg","size":17446,"height":352,"width":922}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/

/divspan style="font-size:15px"能明显的看出来,自定义导航栏页面内容已经顶到屏幕顶端,除了胶囊按钮,其他都是页面可控区域。/spanspan style="font-size:15px"每个手机的屏幕都不一样,各家体系的状况栏高度也不一样,是以,我们在开辟页面时要推敲屏幕的适配,有刘海的,要留出刘海的距离,没有的,要把状况栏高度留出来。/spanpstrongspan style="font-size:16px"1.获取导航栏高度及按钮地位/span/strong

/ppspan style="font-size:15px"微信供给了获取导航栏高度的Api和胶囊按钮地位的Api/span

/pspan style="font-size:inherit"// 体系信息/span

span style="font-size:inherit"const/span systemInfo = wx.getSystemInfoSync();

span style="font-size:inherit"// 胶囊按钮地位信息/span

span style="font-size:inherit"const/span menuButtonInfo = wx.getMenuButtonBoundingClientRect();

pspan style="font-size:15px"在控制台打印出这两个Api返回成果/span/pdiv class="image-package"img src=" " img-data="{"format":"jpeg","size":39744,"height":497,"width":679}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/

/divpspan style="font-size:15px"这里面我们只说几个我们接下来用到的参数。/span/pstatusBarHeight span style="font-size:inherit"// 状况栏高度/span

screenWidth span style="font-size:inherit"// 胶囊的宽度/span

top span style="font-size:inherit"// 胶囊到顶部距离/span

height span style="font-size:inherit"// 胶囊的高度/span

right span style="font-size:inherit"// 胶囊距离右边的距离/span

pspan style="font-size:15px"经由过程这几个参数,我们可以计算出状况栏的高度,微信胶囊所占的高度(存在padding值,可以使元素和胶囊纵向居中)/span

/ppspan style="font-size:15px"起首在app.js中定义全局data-globalData/span/pglobalData: {

navBarHeight: span style="font-size:inherit"0/span, span style="font-size:inherit"// 导航栏高度/span

menuBotton: span style="font-size:inherit"0/span, span style="font-size:inherit"// 胶囊距底部间距(保持底部间距一致)/span

menuRight: span style="font-size:inherit"0/span, span style="font-size:inherit"// 胶囊距右方间距(方保持左、右间距一致)/span

menuHeight: span style="font-size:inherit"0/span, span style="font-size:inherit"// 胶囊高度(自定义内容可与胶囊高度包管一致)/span

},

pspan style="font-size:15px"新建个办法/span

/psetNavBarInfo() {

span style="font-size:inherit"// 获取体系信息/span

const systemInfo = wx.getSystemInfoSync();

span style="font-size:inherit"// 胶囊按钮地位信息/span

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

span style="font-size:inherit"// 导航栏高度 = 状况栏到胶囊的间距(胶囊距上距离-状况栏高度) * 2 + 胶囊高度 + 状况栏高度/span

span style="font-size:inherit"this/span.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * span style="font-size:inherit"2/span + menuButtonInfo.height + systemInfo.statusBarHeight;

span style="font-size:inherit"this/span.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;

span style="font-size:inherit"this/span.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;

span style="font-size:inherit"this/span.globalData.menuHeight = menuButtonInfo.right;

}

pspan style="font-size:15px"在onLaunch中调用,因为我这个项目是所有的导航都不消微信自带的,所以在app.js/span

小法度榜样顶部导航栏,小法度榜样顶部导航栏标题不居中 第1张

/ppspan style="font-size:15px"中调用及设置data。/span/p onLaunch() {

span style="font-size:inherit"this/span.setNavBarInfo()

},

pspan style="font-size:15px"/span style="font-size:15px"到这里所须要用到的都已经存了起来,页面用法也比较简单,清除状况栏的高度,设置导航栏的高度和胶囊高度保持,用flex构造。/span

/ppstrongspan style="font-size:16px"2.页面适配/span/strong/ppspan style="font-size:15px"起首page.js中定义变量/span/pspan style="font-size:inherit"var/span app = getApp()

Page({

span style="font-size:inherit"/*

* 页面的初始数据

//span

data: {

navBarHeight: app.globalData.navBarHeight, span style="font-size:inherit"//导航栏高度/span

menuBotton: app.globalData.menuBotton, span style="font-size:inherit"//导航栏距离顶部距离/span

menuRight: app.globalData.menuRight, span style="font-size:inherit"//导航栏距离右侧距离/span

menuHeight: app.globalData.menuHeight, span style="font-size:inherit"//导航栏高度/span

}

})

pspan style="font-size:15px"页面应用/span

/pspan style="font-size:inherit"span style="font-size:inherit"view/span span style="font-size:inherit"class/span=span style="font-size:inherit""nav"/span span style="font-size:inherit"style/span=span style="font-size:inherit""height:{{navBarHeight}}px;"/span/span

span style="font-size:inherit"span style="font-size:inherit"view/span span style="font-size:inherit"class/span=span style="font-size:inherit""nav-main"/span/span

span style="font-size:inherit"/span

span style="font-size:inherit"span style="font-size:inherit"view/span

span style="font-size:inherit"class/span=span style="font-size:inherit""capsule-box"/span span style="font-size:inherit"style/span=span style="font-size:inherit""style="/spanspan style="font-size:inherit"height:/span{{menuHeight+menuBotton 2}}span style="font-size:inherit"px/span; span style="font-size:inherit"min-height:/span{{menuHeight}}span style="font-size:inherit"px/span; span style="font-size:inherit"line-height:/span{{menuHeight}}span style="font-size:inherit"px/span; span style="font-size:inherit"bottom:0px/span;span style="font-size:inherit"padding:0/span {{menuRight}}span style="font-size:inherit"px/span;"/span

span style="font-size:inherit"/span

span style="font-size:inherit"span style="font-size:inherit"slot/span/spanspan style="font-size:inherit"/span style="font-size:inherit"slot/span/span

span style="font-size:inherit"/span style="font-size:inherit"view/span/span

span style="font-size:inherit"/span style="font-size:inherit"view/span/span

span style="font-size:inherit"/span style="font-size:inherit"view/span/span

pspan style="font-size:15px"wxss/span

/pspan style="font-size:inherit"/ 公共导航 *//span

span style="font-size:inherit".nav/span {

span style="font-size:inherit"position/span: fixed;

span style="font-size:inherit"top/span: span style="font-size:inherit"0/span;

span style="font-size:inherit"left/span: span style="font-size:inherit"0/span;

span style="font-size:inherit"box-sizing/span: border-box;

span style="font-size:inherit"width/span: span style="font-size:inherit"100vw/span;

span style="font-size:inherit"z-index/span: span style="font-size:inherit"1000/span;

}

span style="font-size:inherit".nav-main/span {

span style="font-size:inherit"width/span: span style="font-size:inherit"100%/span;

span style="font-size:inherit"height/span: span style="font-size:inherit"100%/span;

span style="font-size:inherit"box-sizing/span: border-box;

span style="font-size:inherit"position/span: relative;

}

span style="font-size:inherit".nav/span span style="font-size:inherit".capsule-box/span {

span style="font-size:inherit"position/span: absolute;

span style="font-size:inherit"box-sizing/span: border-box;

span style="font-size:inherit"width/span: span style="font-size:inherit"100%/span;

span style="font-size:inherit"display/span: flex;

span style="font-size:inherit"align-items/span: center;

}

pspan style="font-size:15px"最终后果/span/pdiv class="image-package"img src=" " img-data="{"format":"jpeg","size":4933,"height":105,"width":349}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/

/divpspan style="font-size:15px"/

/ppspan style="font-size:15px"此种适配筹划适应所有手机,应当说是最优的选择。/span/p

微信小法度榜样之自定义模态弹窗(带动画)实例

起首看看官方供给小法度榜样顶部导航栏的模态弹窗

api如下小法度榜样顶部导航栏

示例小法度榜样顶部导航栏

如许的模态弹窗,充其量只能做个alert,提示一下信息。

然则并不克不及应用它来处理复杂性的弹窗营业,是以写了Michael从新自定义了一个,采取了仿原生的样式写法

wxml****:

wxss:

js:

相干系接:

------------------------------------------------------------

微信开辟者对象的快捷键

微信小法度榜样的文件构造 —— 微信小法度榜样教程系列(1)

微信小法度榜样的生命周期实例演示 —— 微信小法度榜样教程系列(2)

微信小法度榜样的动态修改视图层的数据 —— 微信小法度榜样教程系列(3)

微信小法度榜样的新建页面 —— 微信小法度榜样教程系列(4)

微信小法度榜样的若何应用全局属性 —— 微信小法度榜样教程系列(5)

微信小法度榜样的页面跳转 —— 微信小法度榜样教程系列(6)

微信小法度榜样标题栏和导航栏的设置 —— 微信小法度榜样教程系列(7)

微信小法度榜样的感化域和模块化 —— 微信小法度榜样教程系列(8)

微信小法度榜样视图层的数据绑定 —— 微信小法度榜样教程系列(9)

微信小法度榜样视图层的前提衬着 —— 微信小法度榜样教程系列(10)

微信小法度榜样视图层的列表衬着 —— 微信小法度榜样教程系列(11)

微信小法度榜样视图层的模板 —— 微信小法度榜样教程系列(12)

微信小法度榜样之wxss —— 微信小法度榜样教程系列(13)

微信小法度榜样的收集请求 —— 微信小法度榜样教程系列(14)

微信小法度榜样的百度地图获取地舆地位 —— 微信小法度榜样教程系列(15)

微信小法度榜样应用百度api获取气象信息 —— 微信小法度榜样教程系列(16)

微信小法度榜样获取体系日期和时光 —— 微信小法度榜样教程系列(17)

微信小法度榜样之上拉加载和下拉刷新 —— 微信小法度榜样教程系列(18)

微信小法度榜样之组件 —— 微信小法度榜样教程系列(19)

微信小法度榜样之微信上岸 —— 微信小法度榜样教程系列(20)

------------------------------------------------------------

微信小法度榜样之顶部导航栏实例 —— 微信小法度榜样实战系列(1)

微信小法度榜样之上拉加载(分页加载)实例 —— 微信小法度榜样实战系列(2)

微信小法度榜样之轮播图实例 —— 微信小法度榜样实战系列(3)

微信小法度榜样之仿android fragment之可滑动的底部导航栏实例 —— 微信小法度榜样实战系列(4)

微信小法度榜样之登录页实例 —— 微信小法度榜样实战系列(5)

微信小法度榜样之自定义toast实例 —— 微信小法度榜样实战系列(6)

微信小法度榜样之自定义抽屉菜单(从下拉出)实例 —— 微信小法度榜样实战系列(7)

微信小法度榜样之自定义模态弹窗(带动画)实例 —— 微信小法度榜样实战系列(8)

------------------------------------------------------------

微信小法度榜样之侧栏分类 —— 微信小法度榜样实战商城系列(1)

微信小法度榜样之仿淘宝分类进口 —— 微信小法度榜样实战商城系列(2)

微信小法度榜样之购物数量加减 —— 微信小法度榜样实战商城系列(3)

微信小法度榜样之商品属性分类 —— 微信小法度榜样实战商城系列(4)

微信小法度榜样之购物车 —— 微信小法度榜样实战商城系列(5)

未完待续。。。

更多小法度榜样的教程:

感谢不雅看,不足之处,敬请指导

微信小法度榜样(上)

注册开辟者账号:

安装小法度榜样开辟对象:

创建项目

pages目次:用于存放所有的页面。

utils目次:用于存放对象类文件。

app.js:是进口文件,法度榜样在运行时,起首要履行该文件。

app.json:是全局设备文件,用于设备小法度榜样的信息(它里面设备的是全局信息)。

app.wxss:是全局样式文件。全局样式文件里面定义的选择器,在所有的页面中生效。

project.config.json:是项目设备文件。

sitemap.json:是SEO设备文件,便利用户搜刮到该小法度榜样。

(1)pages设备项

pages里面注册的是视图。用于指定小法度榜样由哪些页面构成,每一项都对应一个页面的路径(含文件名)信息

(2)window设备项

window 是全局窗口设备。

backgroundTextStyle 设置文本样式(下拉loading的样式),仅支撑 dark / light。

navigationBarBackgroundColor 设置导航栏背景。

navigationBarTitleText 设置导航栏文本。

navigationBarTextStyle 设置导航栏标题色彩,仅支撑 black / white。

(3)style

style 设置样式级别,默认是v2。

(4)sitemapLocation

sitemapLocation 指明sitemap.json 的地位;默认为 'sitemap.json' 即在 app.json 同级目次下名字的 sitemap.json 文件。

每一个页面由四个文件构成:xxx.wxml文件、xxx.wxss文件、 xxx.js文件和xxx.json文件。

(1)xxx.wxml文件

xxx.wxml文件,就相当于一个html文件。在wxml文件中,不克不及写传统的html标签,只能写微信供给的组件。

① view组件

相当于div标签。

② text组件

相当于span标签。

③ swiper

swiper是滑块视图容器,它里面只能放swiper-item组件。

swiper组件的常用属性:

circular是连接滑动

autoplay是主动切换

interval是主动切换时光距离

indicator-dots是否显示面板指导点

indicator-color指导点色彩

indicator-active-color当前选中的指导点色彩

④ image

image是图片组件,最好全部采取收集图片,因为小法度榜样的总体积不许可跨越2MB。

(2)xxx.wxss文件

xxx.wxss文件,就相当于一个css文件。在wxss文件中,最好不要写标签选择器和id选择器,同一写类选择器。

为了让小法度榜样里面的内容在各类设备上可以或许自适应显示,微信推出了响应式单位:rpx。在iphone6中,2rpx=1px。

(3)xxx.js文件

xxx.js文件,是交互文件(核心文件)。

Page()函数,返回页面对象,该函数须要传一个设备参数,这个设备参数是一个对象。在这个设备对象中,定义当前页面的所有内容。

① data

定义页面的数据。

② 自定义函数

开辟者可以添加随便率性的函数或数据到Object 参数中,在页面的函数顶用this可以拜访。

(4)xxx.json文件

xxx.json文件,是页面的设备文件(它里面设备的是当前页面信息)。

WXML 中的动态数据均来自对应 Page 的 data。

(1)获取data中数据

经由过程插值表达式{{}},可以显示js里面定义的data里面的数据。

(2)组件属性(须要在双引号之内)

(3)运算

可以在{{}} 内进行简单的运算。

① 三元运算

② 逻辑断定

bindtap是触屏事宜,其实就是相当于网页中的点击事宜。

小法度榜样中bindtap绑定办法时不克不及传参数。所以组件经由过程data-xxx传递数据。

留意: 自定义属性的定名用驼峰或者大写定名,小法度榜样内部会主动转成小写。

8、setData()办法

setData()办法,更新页面中数据。页面数据更新后,调用setData()办法从新衬着到页面。

wx:for指令用于轮回数组数据,生成组件。

轮回出来的每一项经由过程item返回,每一项对应的索引,经由过程index返回。

wx:key="",设置每一项独一的标识。轮回列表时,添加wx:key的好处是,将来列表产生变更时从新衬着列表的损耗为更低。

前提衬着可以应用wx:if或hidden。

一般来说,wx:if 有更高的切换消费而 hidden 有更高的初始衬着消费。是以,假如须要频繁切换的情景下,用 hidden 更好,假如在运行时前提不大可能改变则 wx:if 较好。

wx:if用于前提衬着:前提为真生成里面的内容,前提为假不会生成里面的内容。(每次从新生成内容)

也可以用wx:elif 和 wx:else 来添加一个 else 块。

hidden用于前提衬着:前提为真隐蔽里面的内容,前提为假显示里面的内容。(每次切换样式)

在app.json文件中添加tabBar节点。tabBar是小法度榜样客户端底部或顶部tab栏的实现。

color:tab上的文字默认色彩,仅支撑十六进制色彩。

selectedColor:tab上的文字选中时的色彩,仅支撑十六进制色彩。

backgroundColor:tab的背景色,仅支撑十六进制色彩。

borderStyle:tabbar上边框的色彩, 仅支撑 black / white。

position:tabBar的地位,默认值是: bottom,仅支撑 bottom / top。当 position 为 top 时,不显示 icon。

custom:自定义tabBar。

(2)list

list:tab的列表。

list 接收一个数组,只能设备起码 2 个、最多 5 个 tab。

pagePath:页面路径,必须在pages 中先定义。

text:tab 上按钮文字。

iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支撑收集图片。selectedIconPath:选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支撑收集图片。

(1)跳转通俗页面

办法① navigator组件

办法② navigateTo()办法

navigateTo()办法,用于跳转通俗页面。

(2)跳转tabBar页面

办法① navigator组件

假如要应用navigator组件跳转tabBar页面,须要设置open-type="switchTab"。

办法② switchTab()办法

switchTab()办法,用于跳转tabBar页面。

title:提示的标题

content:提示的内容

success:接口调用成功的回调函数。回调函数中的confirm属性返回true,表示点击的是肯定按钮,不然是撤消按钮。

title:提示的内容

icon:图标

duration:消息提示框的显示时光

mask:是否显示透明蒙层,防止触摸穿透

模块化语法有两种:① commonjs规范,② es6规范。

nodejs情况采取的就是commonjs规范。采取exports 或 module.exports 导出成员,采取require() 导入成员。

微信小法度榜样支撑commonjs规范,同时还支撑官方的ES6规范。ES6规范采取export 导出成员,采取import 导入成员。

将封装的办法放到util目次下的js文件中。可以新建js文件,也可以写在直接util.js文件中。

(1)确认框办法

定义确认框办法,并导出

(2)消息框办法

定义消息框办法,并导出

(3)获取事宜参数的办法

import是ES6的导入语句。

wx对象是微信小法度榜样的全局对象,在任何处所都可以应用。

(1) 注册语句

(2) 在app.js进口文件中导入

留意: 注册给wx对象的办法,须要在app.js文件中导入,才可应用。

(3) 调用办法

wx.办法名(参数)

【微信小法度榜样】自定义顶部导航栏

一、设置自定义顶部导航

Navigation是小法度榜样的顶部导航组件,当页面设备 navigationStyle 设置为 custom 的时刻可以应用此组件替代原生导航栏。

1.全局顶部导航自定义,在app.json的“window”里添加"navigationStyle": "custom"

2.只在某一个页面自定义顶部导航,在该页面的json文件里添加"navigationStyle": "custom"

二、具体的导航块根据须要自行书写

小程序顶部导航栏的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于小程序顶部导航栏标题不居中、小程序顶部导航栏的信息别忘了在本站进行查找喔。

猜你喜欢

发表评论

发表评论:

扫描微信

扫一扫添加微信

分享:

支付宝

微信