微信小程序系列之自定义顶部导航功能


Posted in Javascript onMay 21, 2019

具备基础

vue框架:vue官方文档

mpvue框架:mpvue官方文档

全局配置

•找到全局的app.json文件,在配置中添加如下内容:

"navigationStyle": "custom"
"window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle": "black",
 "navigationStyle": "custom" // 这个配置
}

组件思维

•使用mpvue开发小程序,src目录下默认会生成一个components文件夹;
•由于自定义组件所有webview页面都要使用,所以把它归类为公共组件;
•可以在components文件夹下新建一个common文件夹,专门放置公共组件,如下:

├── src                    源码目录 
│  ├── main.js             入口js文件
│  ├── app.json            全局配置
│  ├── components          组件目录
│  │  └── common           公共组件
          └── topBar.vue   顶部自定义导航复制代码

组件内容

•由于不同设备statusBarHeight值可能有差异,自定义组件的高度取决于statusBarHeight值;
•找到全局App.vue文件,在这里面执行小程序的onLaunch生命周期(监听小程序初始化);
•具体获取方法如下:

const that = this
let systemInfo = wx.getSystemInfoSync()
that.setBarHeight(systemInfo.statusBarHeight)

• 通过vuex存储statusBarHeight值,不清楚vuex如何在小程序中使用的可参考mpvue如何使用vuex;
•.vue文件的html相关结构如下:

<template>
 <div class="top-bar">
 <div class="bar" :style="'height:'+(systemInfo.barHeight+46)+'px;'">
  <span class="title">{{title}}</span>
  <button v-if="way && way==='/pages/mine/main'" open-type="getUserInfo" @getuserinfo="toMine">
  <image class="icon" :src="icon" />
  </button>
  <image v-else-if="way && way!=='/pages/mine/main'" class="icon-back" :src="icon" @tap="toPage(way)" />
  <span v-else></span>
 </div>
 <p class="place-holder" :style="'padding-top:'+(systemInfo.barHeight+6)+'px;'"></p>
 </div>
</template>

•结构分析如下,可看做两部分,一部分是fixed定位在顶部的class="bar"的div;另一部分是class="place-holder"的p;
•之所以要放一个p标签,是因为不用每次引入topBar.vue时都要考虑class="bar"的div都会遮挡内容区的问题;
•因此将p标签height:80rpx;加上padding-top的6px;正好等于class="bar"的div的高度;

微信小程序系列之自定义顶部导航功能 

微信小程序系列之自定义顶部导航功能 

•由于项目中左边放置的是进入个人中心的功能,所以左边头像必须使用button来出发获取用户信息的授权;
•同时需要考虑到左边不是头像的情况,这时就可以用到vue的props属性,具体props值,看下面代码,默认是给向左的箭头,表示返回上一页;

props: {
 title: {
 type: String,
 required: true
 },
 icon: {
 type: String,
 default: require('@static/icon/icon_back.png')
 },
 way: {
 type: String,
 default: null
 }
}

•如果way啥也不传则左侧不显示任何icon;
•如果way传入的是进入个人中心的路由,则走button结构上面的事件;
•如果way传入的是‘back',则显示返回的向左箭头。

问题总结

•该公共topBar.vue组件对ipad不能有效适配;
•fixed定位在安卓手机上下拉刷新时,结构会跟着下拉,例如本文的自定义导航,下拉刷新的时候导航会跟着下拉然后再fixed到顶部(开发者工具上没问题,真机有问题);

以上所述是小编给大家介绍的微信小程序系列之自定义顶部导航功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
原生js实现九宫格拖拽换位
Jan 26 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 #Javascript
微信小程序websocket实现即时聊天功能
May 21 #Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 #Javascript
taro开发微信小程序的实践
May 21 #Javascript
element-ui表格合并span-method的实现方法
May 21 #Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 #Javascript
浅谈React Native 传参的几种方式(小结)
May 21 #Javascript
You might like
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
浅析JavaScript中的delete运算符
2013/11/30 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
用Python写一个自动木马程序
2019/09/17 Python
python多线程并发及测试框架案例
2019/10/15 Python
python实现AdaBoost算法的示例
2020/10/03 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
大学生志愿者活动总结
2014/06/27 职场文书
卖车协议书范例
2014/09/16 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
2014年领班工作总结
2014/11/25 职场文书
正规借条模板
2015/05/26 职场文书
初中政治教学工作总结
2015/08/13 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
一行Python命令实现批量加水印
2022/04/07 Python
git中cherry-pick命令的使用教程
2022/06/25 Servers