第一次分享 给我一个赞吧 人帅话不多 直接上代码 html [代码]<view class='announcement-text' id="announcement-text" bindtransitionend='animationend' style="padding-left: {{ScreenWidth}}px;" animation="{{animationData}}"> {{notice_content}}</view> [代码] 绑定动画结束事件 bindtransitionend='animationend’ js 创建动画 [代码]initNoticeAnimation() { let that = this; this.createSelectorQuery().select('#announcement-text').boundingClientRect(function (rect) { let width = rect.width; //获取公告view容器的宽度 let hasStrLen = Math.ceil(width); //动画时长， 为啥是10，这个凭感觉，越大越慢，自己调试取合适的倍数 let timeT = hasStrLen * 10; //创建动画实例 var animation = wx.createAnimation({ //此处以公告内容来设置动画持续时间（duration：决定整个动画播放的速度） duration: timeT, timingFunction: 'linear' }); animation.translate(-Number(hasStrLen), 0).step(); that.setData({ hasStrLen: hasStrLen, timeT: timeT, animationData: animation.export(), animation: animation }); }).exec(); }, [代码] 循环动画（关键） [代码]animationend() { let that = this; //复位容器的位置，准备开始下一次动画 that.data.animation.translate(0, 0).step({duration: 0}); that.setData({ animationData: that.data.animation.export() }, ()=>{ //开始新一轮动画 let animation = wx.createAnimation({ //此处以公告最长内容来设置动画持续时间（duration：决定整个动画播放的速度） duration: that.data.timeT, timingFunction: 'linear' }); animation.translate(-Number(that.data.hasStrLen), 0).step(); that.setData({ animationData: animation.export() }); }); }, [代码]

最新：2020/06/13。修改为scroll-view与swiper联动效果,新增下拉刷新以及上拉加载效果。。具体效果查看代码片段，以下文章内容和就不改了 刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段，需要的大哥拿去随便改改，先看效果图： [图片] 代码如下： wxml [代码]<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" > <view class="navigate-item" id="item{{index}}" wx:for="{{taskList}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick"> <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view> <view class="currtline {{currentTab === index ? 'active' : ''}}"></view> </view> </scroll-view> [代码] wxss [代码].scroll-wrapper { white-space: nowrap; -webkit-overflow-scrolling: touch; background: #FFF; height: 90rpx; padding: 0 32rpx; box-sizing: border-box; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .navigate-item { display: inline-block; text-align: center; height: 90rpx; line-height: 90rpx; margin: 0 16rpx; } .names { font-size: 28rpx; color: #3c3c3c; } .names.active { color: #00cc88; font-weight: bold; font-size: 34rpx; } .currtline { margin: -8rpx auto 0 auto; width: 100rpx; height: 8rpx; border-radius: 4rpx; } .currtline.active { background: #47CD88; transition: all .3s; } [代码] JS [代码]const app = getApp() Page({ data: { currentTab: 0, taskList: [{ name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, ] }, onLoad() { }, handleClick(e) { let currentTab = e.currentTarget.dataset.index this.setData({ currentTab }) }, }) [代码] 最后奉上代码片段： https://developers.weixin.qq.com/s/nkyp64mN7fim

在线答题小程序交互设计整理六 ### 本文概述 今天体验的小程序名字是：元贝驾考 | 学车考驾照宝典 [图片] 最近我会体验市面上不同在线答题类小程序，每个小程序仅仅截图，不做分析，每篇文章整理一个小程序，为我的小程序提供设计上的思路 在线答题小程序主要有三个细节： 1. 答题环境 2. 得分环境 3. 错题记录环节 这三部分是文章的重点。 ### 小程序截图 [图片] [图片] [图片] [图片] [图片] ### 本文总结 待总

最近在搞微信小程序订阅消息，遇到不少的坑，这篇文章的初衷就是帮忙开发者少踩坑，业务能快速对接订阅消息。 也欢迎开发者私聊我，咱们一起维护这个列表。 下面有部分内容是从@拾忆和@Jianbo摘取的，如有侵权，联系我，我来删除。 官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html 订阅消息体验踩坑@拾忆 https://developers.weixin.qq.com/community/develop/article/doc/000e22321b8ef0b9bc491ae9c53c13 小程序订阅消息开发指南@Jianbo https://developers.weixin.qq.com/community/develop/article/doc/00026407d58cf07bb96941b0e5b813 开发者需要关注的点 1.如果不勾选红色方框内的内容，用户每次触发订阅消息功能都会弹出授权窗口，如果用户勾选了则不会出现弹窗。 2.微信不会为开发者保存订阅次数，需要自己在后台记录用户触发的次数。超过次数调用接口下发订阅消息会返回失败。 3.发送模板格式和原来的模板消息格式不一致，特别是data内的内容，订阅消息的字段key是和数据类型有关，value的参数需要严格按照设置的类型提交，具体使用参考后台的模板详情。 4.长期订阅消息只针对特定行业开放，所以普通开发者并无法使用。 5.用户是否勾选总是保持以上选择，不再询问，这个对开发者透明 6.测试环境如果勾选总是保持以上选择，就不会在弹出来，如果进入设置页关闭，也不会弹出来。有一个骚操作，就是去后台将订阅消息模板删除，重新新建一个，就会生成一个新的模板id，就能进行测试了 7.允许和拒绝的回调返回errMsg是一样的 低版本说明 1.基础库2.8.2 版本才开始支持，用户发生点击行为或者发起支付回调后，才可以调起订阅消息界面。 2.微信版本：一次调用最多可订阅3条消息（注意：iOS客户端7.0.6版本、Android客户端7.0.7版本之后的一次性订阅/长期订阅才支持多个模板消息，iOS客户端7.0.5版本、Android客户端7.0.6版本之前的一次订阅只支持一个模板消息）消息模板id在[微信公众平台(mp.weixin.qq.com)-功能-订阅消息]中配置 使用的两种方式 1.点击行为，不能嵌套在form组件 2.支付回调，可以wx.requestPayment回调里使用 可参考的产品 1.luckin微信小程序，在支付之前体验 2.青柠单车小程序，扫码就能体验 bug 错误码 1.43101用户拒绝接受消息，如果用户之前曾经订阅过，则表示用户取消了订阅关系 changeLog 1.2019-12-31 20:00：目前订阅消息不支持跳开发版，我们会尽快优化解决 2.2020-01-02 12:55：微信开放平台，向非api方式注册的小程序添加订阅消息，小程序类目不符合订阅消息类目，添加不了，需要手动到微信后台设置类目 3.2020-01-02 19:00 新版订阅消息IOS手机bug，直接返回之后就不会在弹窗了，微信7.0.9版本已解决https://developers.weixin.qq.com/community/develop/doc/00008a645500e88023b9341fc51c 4.2020-01-06 15:00 小程序订阅消息弹出样式是系统默认的，目前开发者不允许修改 5.2020-01-071510 小程序订阅消息的相关接口频次上限是多少(当前每个账号的模板消息的日调用上限为10万次，单个模板没有特殊限制。当账号粉丝数超过10W/100W/1000W时，模板消息的日调用上限会相应提升，以公众号MP后台开发者中心页面中标明的数字为准。https://developers.weixin.qq.com/community/develop/doc/00084455e7c068058ab9db8d656800 6.2020-01-08 11:30 微信支付成功从A页面进入B页面，微信版本 7.0.8，页面切换时，订阅消息弹窗不显示了。微信版本7.0.9没有这个问题；后续会修复

微信小程序官方决定在2020-1-10全面线下小程序模板消息，要去替换为订阅消息。那对开发者而言，又要一个一个地方去修改代码兼容.... 所以我替大家写了段代码，来快速解决问题。复制下面这段代码到app.js文件最上面即可解决问题。代码的主要功能是在每一个tap类型的点击事件中触发订阅弹窗，这样用户点几次界面，你就可以发几次消息。这也是让发送次数最大化，不可能比这个次数还多了。 预期结果是：用户点几次弹窗，就会注意到有一个不再提醒按钮，一旦选了它，那你就可以随便发订阅消息了！ // 记录原Page方法 const originPage = Page; // 重写Page方法 Page = (page) => {   Object.keys(page).forEach(function(key){     if(key !== 'data'){       let originMethod = page[key];       page[key] = function () {         let e = arguments[0];         //给所有的点击事件增加订阅消息弹窗         if(!!e && !!e.type &&  e.type === 'tap'){           wx.requestSubscribeMessage({             tmplIds: ['3E66jPXafsnikZoQR5uk0OUzIUVASZE5scyAu5YCHPI'], ////////这里替换为自己的模板ID/////             success (res) {               // console.log(res)             },             fail (res) {               // console.log('订阅消息失败',res)             }           })         }         return originMethod.call(this,...arguments)       }     }   });   return originPage(page); };

项目需要构建省市区级联器，看遍了千篇一路的分栏多级选择器，公司设计厌了。 找了找相关的组件库有类似的。于是就手撸了一个。简单测了一下，不能保证没有bug，暂未商用，会持续优化。需要的朋友可以关注一下，欢迎对代码进行审查修改。 源码也比较简单，感兴趣的看过来 github 理论上支持多级不同深度混合的联动选择 ##效果 此处以省市区三级联动演示 [图片] ##说明 [代码]/demos/city[代码] 使用全国省市区信息，演示省市区三级联动选择器 中国行政区数据来源 ： https://github.com/dwqs/area-data [代码]/components/cascader[代码] 多级联动组件 使用 引入组件 拷贝/components/cascader 到项目中 在需要使用的页面内引入 [代码] "usingComponents": { "cascader": "/components/cascader/cascader" } [代码] 使用组件 [代码] <cascader></cascader> [代码] api props 属性 类型 说明 height Number 级联器高度，最小值300，默认500，单位rpx placeholder String 占位提示符 value [ Number, String, Array ] 初始化选中值， 单级级联时可传递 Number、String 。 多级级联请传入 Array options Array 待选项，格式如下 options格式 属性 说明 label 显示在选择器上的文本 value 对应的值，唯一标识 children 子级元素，集合数组。 格式相同 [代码][{ "label":"江苏省", "value":"10001", "children":[{ "label":"南京市", "value":"100011", "children": ... } ... ] ... [代码] Events 事件名 说明 回调参数 confirm 选择 [代码]Event.detail : Array[代码] cancel 取消 – error 组件内部错误 [代码]Event.detail : String[代码]

最近做小程序，有这个一个需求，就是列表里的条目背景色要实现交替颜色显示。比如奇数列显示红色，偶数列显示绿色。比如像下面这样。 [图片][图片] 经过一番研究，发现借助css3的nth-child() 选择器可以很好的实现，颜色交替效果。 如我们定义如下index.wxml [代码]<!--index.wxml--> <view class='root' wx:for="{{list}}" wx:key="item">  <view class='item'>{{item}}</view> </view> [代码]在index.js里定义如下数据。 [代码]//index.js Page({  data: {    list: [1, 2, 3, 4, 5, 6, 7, 8, 9]  } }) [代码]实现如下效果1，奇数列红色，偶数列绿色背景，定义如下wxss [代码]/**index.wxss**/ .root:nth-child(1n+0) {  background: red; } .root:nth-child(2n+0) {  background: green; } .item {  width: 100%;  height: 40px; } [代码]效果图如下 [图片][图片] 2，三种颜色的交替 [图片][图片] 可以看到我们借助nth-child() 选择器可以很好的实现列表中背景颜色交替实现的效果。 有任何关于小程序的问题可以微信交流 2501902696（备注小程序）

1、checkbox checkbox .wx-checkbox-input{     border-radius:50%;     width:20px;height:20px; } checkbox .wx-checkbox-input.wx-checkbox-input-checked{     border-color:#F0302F !important;     background:#F0302F !important; } checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{     border-radius:50%;     width:20px;     height:20px;     line-height:20px;     text-align:center;     font-size:15px;     color:#fff;     background:transparent;     transform:translate(-50%, -50%) scale(1);     -webkit-transform:translate(-50%, -50%) scale(1); } 2、radio radio .wx-radio-input{     border-radius:50%;     width:20px;height:20px; } radio .wx-radio-input.wx-radio-input-checked{     border-color:#F0302F !important;     background:#F0302F !important; } radio .wx-radio-input.wx-radio-input-checked::before{     border-radius:50%;     width:20px;     height:20px;     line-height:20px;     text-align:center;     font-size:15px;     color:#fff;     background:transparent;     transform:translate(-50%, -50%) scale(1);     -webkit-transform:translate(-50%, -50%) scale(1); } 如果上面的代码对您有帮助，麻烦抖一抖小手点下赞，谢谢

最近在做一款时间管理小程序，用来记录每天的工作安排，时间利用率等，需要图形图表来显示。但是看了echart之后感觉不是很满意，没有自己想要的效果。于是迫于无奈选择原生canvas提供的API了，但是太费时间了，要一个细节一个细节的扣。先呈现出来看看效果吧（图片有点大，不方便调小，就将就着看吧）： [图片] [图片] 每一根线条都是一行代码一行代码拼起来的，有成就感但是也觉得太费时间，光下面这个图表就调了两三天。 最后附上程序码直接体验一下，有兴趣的也可以加入群聊： [图片] [图片] 如果各位大佬有值得推荐的图形框架就记得分享一下哦，这样就能节省不少时间了。

背景 在做小程序时，关于默认导航栏，我们遇到了以下的问题： Android、IOS手机对于页面title的展示不一致，安卓title的显示不居中 页面的title只支持纯文本级别的样式控制，不能够做更丰富的title效果 左上角的事件无法监听、定制 路由导航单一，只能够返回上一页，深层级页面的返回不够友好 探索 小程序自定义导航栏已开放许久>>了解一下，相信不少小伙伴已使用过这个功能，同时不少小伙伴也会发现一些坑： 机型多如牛毛：自定义导航栏高度在不同机型始终无法达到视觉上的统一 调皮的胶囊按钮：导航栏元素（文字，图标等）怎么也对不齐那该死的胶囊按钮 各种尺寸的全面屏，奇怪的刘海屏，简直要抓狂 一探究竟 为了搞明白原理，我先去翻了官方文档，>>飞机，点过去是不是很惊喜，很意外，通篇大文尽然只有最下方的一张图片与这个问题有关，并且啥也看不清，汗汗汗… 我特意找了一张图片来 [图片] 分析上图，我得到如下信息： Android跟iOS有差异，表现在顶部到胶囊按钮之间的距离差了6pt 胶囊按钮高度为32pt， iOS和Android一致 动手分析 我们写一个状态栏，通过wx.getSystemInfoSync().statusBarHeight设置高度 Android： [图片] iOS:[图片] 可以看出，iOS胶囊按钮与状态栏之间距离为：4px， Android为8px，是不是所有手机都是这种情况呢？ 答案是:苹果手机确实都是4px,安卓大部分都是7和8 也会有其他的情况(可以自己打印getSystemInfo验证)如何快速便捷算出这个高度,请接着往下看 如何计算 导航栏分为状态栏和标题栏,只要能算出每台手机的导航栏高度问题就迎刃而解 导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度 注：由于胶囊按钮是原生组件，为表现一致，其单位在各种手机中都为px，所以我们自定义导航栏的单位都必需是px（切记不能用rpx），才能完美适配。 解决问题 现在我们明白了原理，可以利用胶囊按钮的位置信息和statusBarHeight高度动态计算导航栏的高度，贴一个实现此功能最重要的方法 [代码]let systemInfo = wx.getSystemInfoSync(); let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息 wx.getMenuButtonBoundingClientRect(); let navBarHeight = (function() { //导航栏高度 let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距 return 2 * gap + rect.height; })(); [代码] gap信息就是不同的手机其状态栏到胶囊按钮间距，具体更多代码实现和使用demo请移步下方代码仓库，代码中还会有输入框文字跳动解决办法,安卓手机输入框文字飞出解决办法,左侧按钮边框太粗解决办法等等 胶囊信息报错和获取不到 问题就在于 getMenuButtonBoundingClientRect 这个方法，在某些机子和环境下会报错或者获取不到，对于此种情况完美可以模拟一个胶囊位置出来 [代码]try { rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null; if (rect === null) { throw 'getMenuButtonBoundingClientRect error'; } //取值为0的情况 if (!rect.width) { throw 'getMenuButtonBoundingClientRect error'; } } catch (error) { let gap = ''; //胶囊按钮上下间距 使导航内容居中 let width = 96; //胶囊的宽度，android大部分96，ios为88 if (systemInfo.platform === 'android') { gap = 8; width = 96; } else if (systemInfo.platform === 'devtools') { if (ios) { gap = 5.5; //开发工具中ios手机 } else { gap = 7.5; //开发工具中android和其他手机 } } else { gap = 4; width = 88; } if (!systemInfo.statusBarHeight) { //开启wifi的情况下修复statusBarHeight值获取不到 systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20; } rect = { //获取不到胶囊信息就自定义重置一个 bottom: systemInfo.statusBarHeight + gap + 32, height: 32, left: systemInfo.windowWidth - width - 10, right: systemInfo.windowWidth - 10, top: systemInfo.statusBarHeight + gap, width: width }; console.log('error', error); console.log('rect', rect); } [代码] 以上代码主要是借鉴了拼多多的默认值写法，android 机子中 gap 值大部分为 8，ios 都为 4，开发工具中 ios 为 5.5，android 为 7.5，这样处理之后自己模拟一个胶囊按钮的位置，这样在获取不到胶囊信息的情况下，可保证绝大多数机子完美显示导航头 吐槽 这么重要的问题，官方尽然没有提供解决方案…竟然提供了一张看不清的图片??? 网上有很多ios设置44，android设置48，还有根据不同的手机型号设置不同高度，通过长时间的开发和尝试，本人发现以上方案并不完美,并且bug很多 代码库 Taro组件gitHub地址详细用法请参考README 原生组件npm构建版本gitHub地址详细用法请参考README 原生组件简易版gitHub地址详细用法请参考README 由于本人精力有限，目前只计划发布维护好这2种组件，其他组件请自行修改代码，有问题请联系 备注 上方2种组件在最下方30多款手机测试情况表现良好 iPhone手机打电话和开热点导致导航栏样式错乱，问题已经解决啦，请去demo里测试，这里特别感谢moments网友提出的问题 本文章并无任何商业性质，如有侵权请联系本人修改或删除 文章少量部分内容是本人查询搜集而来 如有问题可以下方留言讨论，微信zhijunxh 比较 斗鱼: [图片] 虎牙: [图片] 微博: [图片] 酷狗: [图片] 知乎: [图片] [图片] 知乎是这里边做的最好的，但是我个人认为有几个可以优化的小问题 打电话或者开启热点导致样式错落，这也是大部门小程序的问题 导航栏下边距太小，看起来不舒服 搜索框距离2侧按钮组距离不对等 自定义返回和home按钮中的竖线颜色重了，并且感觉太粗 如果您看到了此篇文章，请赶快修改自己的代码，并运用在实践中吧 扫码体验我的小程序: [图片] 创作不易，如果对你有帮助，请移步Taro组件gitHub原生组件gitHub给个星星 star✨✨ 谢谢 测试信息 手机型号 胶囊位置信息 statusBarHeight 测试情况 iPhoneX 80 32 281 369 48 88 44 通过 iPhone8 plus 56 32 320 408 24 88 20 通过 iphone7 56 32 281 368 24 87 20 通过 iPhone6 plus 56 32 320 408 24 88 20 通过 iPhone6 56 32 281 368 24 87 20 通过 HUAWEI SLA-AL00 64 32 254 350 32 96 24 通过 HUAWEI VTR-AL00 64 32 254 350 32 96 24 通过 HUAWEI EVA-AL00 64 32 254 350 32 96 24 通过 HUAWEI EML-AL00 68 32 254 350 36 96 29 通过 HUAWEI VOG-AL00 65 32 254 350 33 96 25 通过 HUAWEI ATU-TL10 64 32 254 350 32 96 24 通过 HUAWEI SMARTISAN OS105 64 32 326 422 32 96 24 通过 XIAOMI MI6 59 28 265 352 31 87 23 通过 XIAOMI MI4LTE 60 32 254 350 28 96 20 通过 XIAOMI MIX3 74 32 287 383 42 96 35 通过 REDMI NOTE3 64 32 254 350 32 96 24 通过 REDMI NOTE4 64 32 254 350 32 96 24 通过 REDMI NOTE3 55 28 255 351 27 96 20 通过 REDMI 5plus 67 32 287 383 35 96 28 通过 MEIZU M571C 65 32 254 350 33 96 25 通过 MEIZU M6 NOTE 62 32 254 350 30 96 22 通过 MEIZU MX4 PRO 62 32 278 374 30 96 22 通过 OPPO A33 65 32 254 350 33 96 26 通过 OPPO R11 58 32 254 350 26 96 18 通过 VIVO Y55 64 32 254 350 32 96 24 通过 HONOR BLN-AL20 64 32 254 350 32 96 24 通过 HONOR NEM-AL10 59 28 265 352 31 87 24 通过 HONOR BND-AL10 64 32 254 350 32 96 24 通过 HONOR duk-al20 64 32 254 350 32 96 24 通过 SAMSUNG SM-G9550 64 32 305 401 32 96 24 通过 360 1801-A01 64 32 254 350 32 96 24 通过

[图片]

我是计划使用wx.getSystemInfo计算出导航栏的高度 然后screenHeight－windowHeight，来定义导航栏的高度， 但是在真机上 打印screenHeight 和 windowHeight 值一样。怎么办？求解

无意间看到一个小程序的分享页左上角是 自定义的 房子图标，点击后可以直接返回到小程序首页，但查看了好久文档都没有找到相应的API，求知道的好心人解答下，谢谢了！！！ [图片]

为什么使用自定义导航 对比默认导航栏，我们会更需要： 统一Android、IOS手机对于页面title的展示样式及位置 更丰富的导航栏定制效果，如添加home图标等 左上角返回事件的监听处理 统一实现双击返回顶部功能 自定义导航组件实现思路 自定义导航组件实现的核心是需要计算导航栏的真实高度 这里以官方文档->扩展能力中的Navigation组件为例分析实现思路。当使用"navigationStyle": "custom"时，默认导航被移除，页面的开始位置变成了屏幕顶部，这时我们需要实现的导航栏是在状态栏下面。 导航栏的真实高度=状态栏高度+导航栏内容。 [图片] 使用wx.getSystemInfo获取到statusBarHeight便是导航栏的高度，但是导航栏内容高度呢？ 有人可能觉得导航栏内容高度顾名思义就是导航栏内容高度啊，内容撑起还用管嘛！要，必须要！ 因为右上角胶囊按钮是原生加载的，我们的导航栏内容需要正好贴在胶囊的下方且垂直居中。 导航栏内容高度=（胶囊按钮的顶部距离 - 状态高度）*2 + 胶囊高度 [图片] 如何计算胶囊的数据呢？幸运的是我们有 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的布局位置信息，那么动态计算导航栏的内容高度就很方便啦。 好了，以上就是动态计算的核心思路，我们再来看官方Navigation组件高度是怎么实现的 [代码]page{--height:44px;--right:190rpx;} .weui-navigation-bar .android{--height:48px;--right:222rpx} .weui-navigation-bar__inner{ position:fixed;top:0;left:0;z-index:5001;display:flex;align-items:center; height:var(--height);padding-right:var(--right);width:calc(100% - var(--right)) } [代码] 导航栏内容的高度是通过- -height这个css变量提前声明好的，安卓机型会重新覆盖为新的css变量值，目前没发现有适配问题。 官方就是官方啊，具体尺寸都知道，那就不用一番计算周折啦，直接拿来主义即可。 导航的布局位置已经搞定啦，剩下就是写具体的内容，不同业务实现需求不同这里就不一一赘述了。 完善官方顶部导航组件 本着拿来主义，直接使用官方Navigation组件，但在实际业务开发中还是遇到不少需要自定义的需求，就比如： loadding样式没实现 标题内容超出没有出现省略号 和原生顶部的样式不兼容，导致单个页面引入时跳转有明显差异出现 没有双击返回顶部功能开关功能 引入页面需要获取导航栏的高度，来控制其他元素距离顶部的位置， 不能根据页面栈数据动态显示隐藏back按钮， 针对以上需求，我们对官方的组件进行二次完善开发，满足常规的自定义需求绰绰有余，直接引入开箱即用。 源码使用示例 https://github.com/YuniorZen/minicode-debug/tree/master/minicode02 [图片] 使用说明 [代码]/*自定义头部导航组件，基于官方组件Navigation开发。*/ <navigation-bar title="会员中心" bindgetBarInfo="getBarInfo"></navigation-bar> [代码] 组件属性列表 属性 类型 描述 bindgetBarInfo function 组件实例载入页面时触发此事件，首参为event对象，event.detail携带当前导航栏信息，如导航栏高度 event.detail.topBarHeight bindback function 点击back按钮触发此事件响应函数 backImage string back按钮的图标地址 homeImage string home按钮的图标地址 ext-class string 添加在组件内部结构的class，可用于修改组件内部的样式 title string 导航标题，如果不提供为空 background string 导航背景色，默认#ffffff color string 导航字体颜色 dbclickBackTop boolean 是否开启双击返回顶部功能，默认true border boolean 是否显示顶部导航下边框分割线，默认false loading boolean 是否显示标题左侧的loading，默认false show boolean 显示隐藏导航，隐藏的时候navigation的高度占位还在,默认true left boolean 左侧区域是否使用slot内容，默认false center boolean 中间区域是否使用slot内容，默认false Slot name 描述 left 左侧slot，在back按钮位置显示，当left属性为true的时候有效 center 标题slot，在标题位置显示，当center属性为true的时候有效 自定义顶部导航目前存在的坑 弹窗的背景蒙层无法覆盖原生胶囊按钮 页面下拉刷新的圆点会被自定义导航遮盖 如果要自定义顶部导航，以上问题避免不了，只能忍着接受。 目前还没遇到完美的解决方案，针对下拉刷新圆点被遮挡的问题微信官方还在需求开发中，如果你有好的想法欢迎留言反馈，一起学习交流。