经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序系列之自定义顶部导航功能
来源:jb51  时间:2019/5/22 8:31:07  对本文有异议

具备基础

vue框架:vue官方文档

mpvue框架:mpvue官方文档

全局配置

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

  1. "navigationStyle": "custom"
  2. "window": {
  3. "backgroundTextStyle": "light",
  4. "navigationBarBackgroundColor": "#fff",
  5. "navigationBarTitleText": "WeChat",
  6. "navigationBarTextStyle": "black",
  7. "navigationStyle": "custom" // 这个配置
  8. }

组件思维

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

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

组件内容

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

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

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

  1. <template>
  2. <div class="top-bar">
  3. <div class="bar" :style="'height:'+(systemInfo.barHeight+46)+'px;'">
  4. <span class="title">{{title}}</span>
  5. <button v-if="way && way==='/pages/mine/main'" open-type="getUserInfo" @getuserinfo="toMine">
  6. <image class="icon" :src="icon" />
  7. </button>
  8. <image v-else-if="way && way!=='/pages/mine/main'" class="icon-back" :src="icon" @tap="toPage(way)" />
  9. <span v-else></span>
  10. </div>
  11. <p class="place-holder" :style="'padding-top:'+(systemInfo.barHeight+6)+'px;'"></p>
  12. </div>
  13. </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值,看下面代码,默认是给向左的箭头,表示返回上一页;

  1. props: {
  2. title: {
  3. type: String,
  4. required: true
  5. },
  6. icon: {
  7. type: String,
  8. default: require('@static/icon/icon_back.png')
  9. },
  10. way: {
  11. type: String,
  12. default: null
  13. }
  14. }

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

问题总结

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号