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


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去除空格的几种方法
Oct 03 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
js的Object.assign用法示例分析
Mar 05 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
set_include_path在win和linux下的区别
2008/01/10 PHP
php 常用类整理
2009/12/23 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
Python导入oracle数据的方法
2015/07/10 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
python3安装crypto出错及解决方法
2019/07/30 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
python db类用法说明
2020/07/07 Python
Python类class参数self原理解析
2020/11/19 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
编程输出如下图形
2013/11/24 面试题
电子商务专业个人的自我评价
2013/12/19 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
新春联欢会主持词
2014/03/24 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
服装设计专业自荐信
2014/06/17 职场文书
公司股东出资证明书
2014/11/01 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
优秀教师事迹材料
2014/12/15 职场文书
上帝也疯狂观后感
2015/06/09 职场文书