专栏首页前端黑板报自定义微信导航栏

自定义微信导航栏

在app.json - window 中开启自定义配置

"navigationStyle" : "custom"

首页的代码:

custom.js

/**
   * 页面的初始数据
   */
  data: {
    bar_Height: wx.getSystemInfoSync().statusBarHeight,
    pos: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * tab选择事件
   */
  tabSelect: function (e) {
    this.setData({
      pos: e.currentTarget.dataset.pos
    })
  },

作者:beatzcs
链接:https://www.jianshu.com/p/8dbadb870382
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

custom.json

{  "enablePullDownRefresh": true}

custom.wxml

<view class='status-bar'>
 <view class='tabar' style='padding-top:{{bar_Height}}px;'>
   <text class='{{pos==0?"active":""}}' bindtap='tabSelect' data-pos='0'>推荐</text>
   <text class='{{pos==1?"active":""}}' bindtap='tabSelect' data-pos='1'>热门</text>
 </view>
</view>

custom.wxss

.status-bar {  
    width: 100%;  background-color: #fdd901;
}
.tabar {  
    display: flex;  justify-content: center;
}
.tabar text {  
    padding: 25rpx 30rpx;  color: #353535;  font-size: 12pt;
}
.tabar .active {  
    color: #fff;
}

个人中心代码:

mine.js

/**
  * 页面的初始数据
  */
 data: {   
      bar_Height: wx.getSystemInfoSync().statusBarHeight
 },

mine.wxml

<view class='tabar' style='top:{{bar_Height}}px;'>
 <view>个人中心</view>
</view>

mine.wxss

.tabar {  
     width: 100%;  
     box-sizing: border-box;  
     position: fixed;  
     text-align: center;  
     font-size: 12pt;  
     color: #fff;  
     background-color: #6cbc72;
}
.tabar view {  
     padding: 25rpx 0rpx;
}

虽然自定义效果还不错,但是要注意进行微信版本的兼容问题,window.navigationStyle 只能支持 6.6.0 以上微信版本,对应基础库版本为 1.9.1。如果需要针对低版本微信进行兼容,要做好兼容性适配。

感觉有一点不好的地方是,一旦开启了自定义,每个页面都要用自定义的导航栏,这就很无奈。比较适合页面数量较少的小程序中,页面较多最好使用<template>进行统一的顶部布局。

本文分享自微信公众号 - 前端黑板报(FeHeiBanBao)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序-实现竖排文字(二)

    前一篇文章《小程序-实现竖排文字》只说了一个解决方案,这次再说一些别的解决方案。 把每一句古诗竖排布局,wxml 代码结构: <view class="mod-...

    前端黑板报
  • 彻底揭秘keep-alive原理

    用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态。keep-a...

    前端黑板报
  • 译《ES6的6个小特性》

    Six Tiny But Awesome ES6 Features.md JS社区的每个人都喜欢新的API、语法以及一些简单、明了更高效的完成重要任务的新特性...

    前端黑板报
  • 腾讯提前批机器学习+快手算法岗

    3、问了比赛中一些细节,比如说如何处理特征,如何评价特征根据什么添加特征、损失函数是什么;

    牛客网
  • 『互联网架构』软件架构-tomcat之环境部署(下)(22)

    PS:看了本次是不是tomcat的配置这么多门道,其实很多时候很多人都是安于目前的项目,意味的去抱怨,而不想通过技术的手段改变现有沉闷的技术。其实很尴尬啊。

    IT故事会
  • Spark sc.textFile(...).map(...).count() 执行完整流程

    另外还有pid,iter都是哪来的呢? 如果你照着源码点进去你会很困惑。为莫名其妙怎么就有了这些iterator呢?

    用户2936994
  • MySQL parttion分区,以及分区和分表的区别

    SQL标准在数据存储的物理方面没有提供太多的指南。SQL语言的使用独立于它所使用的任何数据结构或图表、表、行或列下的介质。但是,大部分高级数据库管理系统已经开发...

    居士
  • 对于多云的未来,你准备好了吗?

    如今,企业正在摆脱单云模式。到2018年,85%的企业将采用多云模式。企业向各种类型的云服务转移,以及如何利用混合云的力量等,围绕云计算的对话不胜枚举。但是,重...

    静一
  • 5.1 类、超类和子类

    Mister24
  • 一种不通过UI给C4C自定义BO创建测试数据的方式

    我想生成一些该BO的实例。以前我采用的做法是给这个自定义BO创建编辑用的UI。然后使用这些UI创建BO实例。这种方式很花费时间。

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券