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

具备基础

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到顶部(开发者工具上没问题,真机有问题);

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

(0)

相关推荐

  • 微信小程序顶部可滚动导航效果

    需求是小程序做头部做导航分类的效果 顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type

  • 微信小程序 开发之顶部导航栏实例代码

    微信小程序 开发之顶部导航栏 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=

  • 微信小程序实战之顶部导航栏(选项卡)(1)

    本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu

  • 微信小程序中顶部导航栏的实现代码

    微信小程序中顶部导航栏的实现 实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre

  • 微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac

  • 微信小程序实现顶部导航特效

    本文实例为大家分享了微信小程序实现顶部导航的具体代码,供大家参考,具体内容如下 之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现,先看效果图 上代码: 1.swiperTab.js Page({ data: { // tab切换 currentTab: 0, }, swichNav: function (e) { console.log(e); var that = this; if (this.data.currentTab ===

  • 微信小程序顶部导航栏滑动tab效果

    小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下 效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导

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

    具备基础 vue框架:vue官方文档 mpvue框架:mpvue官方文档 全局配置 •找到全局的app.json文件,在配置中添加如下内容: "navigationStyle": "custom" "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", &q

  • 微信小程序实现的自定义分享功能示例

    本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object,用于自定义分享内容 示例代码: Page({ onShareAppMessag

  • 微信小程序官方动态自定义底部tabBar的例子

    最近在做小程序的项目,由于用户需求在进入页面时进行选则角色,然后再进入小程序,这时看到的底部菜单看到的不一样,而我们都知道原生的tabBar是不支持这种做法的.在网上搜集了海量资料后发现无非两种解决方法:1.是建立模板,可是会有不能忍受的抖动:2.是利用小程序的组件开发:但是项目已经进行了一般,不可能再进行大的改变: 怎么办呢?? 无意在一条评论中发现说微信官方已经提供该组件,于是在小程序文档中寻找很久才在一个犄角旮旯找到:地址链接. 先看效果图: 1.首先看一下官方用法 这是几个非常重要你需要

  • 微信小程序页面调用自定义组件内的事件详解

    这篇文章主要介绍了微信小程序页面调用自定义组件内的事件详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 page page.json { "usingComponents": { "my-component": "../components/component/component", } } page.wxml <my-component id="myComponent&quo

  • 微信小程序中使用自定义图标(阿里icon)的方法

    weui提供的图标比较少,有时我们需要更多的图标,可以使用以下方法自定义图标库: 1,到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标,下载代码,解压,打开iconfont.css 2,在wxss文件中引用字体 <style type="less"> @font-face { font-family: 'iconfont'; src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAI

  • 微信小程序--特定区域滚动到顶部时固定的方法

    项目要求: 如图所示,当页面滚动到导航条到达搜索栏下方时固定,向上滚动到导航条位置时又恢复原样. 以下是代码展示: 1.wxml <scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun"> <view class="{{top>130 ? 'topnav' : ''}}"> <

  • 微信小程序学习之自定义滚动弹窗

    微信小程序虽然有三种自带的弹窗,但是毕竟功能有限,有时候难以满足我们的需求,所以我们可以自己尝试制作自定义弹窗,话不多说,直接上图: 其中列表部分支持滚动,所以信息承载能力很强. 实现代码: wxml: <button class="showModal" bindtap="showModal_click">唤出弹窗</button> <!--弹窗--> <view class="modal-mask" b

  • 微信小程序中使用自定义字体的实现与体验优化

    目录 前言 技术难点 1.微信限制 2.机型兼容 文档说明 体验优化 附微信小程序设置全局字体 结尾 前言 前段时间,甲方爸爸提出一个比较个性化的需要:要在他们的小程序中使用他们购买过版权的特殊字体.好家伙,我瞬间万马奔腾,我三十米的大刀呢?奈何甲方爸爸就是上帝,甲方爸爸想到的我们要尽量是实现,甲方爸爸没有想到的我们要提前实现. 怎么实现呢? 开撸之前,先研究一下,探索一下技术方案. 技术难点 1. 微信限制 大家开发过微信小程序的应该都知道,微信平台对小程序的体积大小有限制: 整个小程序所有分

  • 微信小程序scroll-view实现自定义滚动条

    本文实例为大家分享了微信小程序scroll-view实现自定义滚动条的具体代码,供大家参考,具体内容如下 html <!-- 九宫格 -->   <scroll-view class="my-grid" scroll-x="true" bindscroll="getleft">     <view class="grid-item" wx:for="{{gridlist}}"

  • 小程序组件之自定义顶部导航实例

    前言 微信小程序凭借着"不占内存,即用即走"等特点,加上微信的社交的属性,其用户量一路保持快速的增长.对其的应用要求也日渐增高,使用更多样化.个性化.其中,对顶部导航的自定义实现,因交互功能成了一个普遍需要实现的组件,而尤因其不同设备下样式的兼容问题 如何更优雅的实现 使其成为大家讨论的热点. 下面我们从对其的设计.实现.使用上进行详细阐述,让大家更加了解这个组件.原创文章,若有写的不妥之处,欢迎大家指出更正. 自定义导航的设计 界面设计 目前,大多小程序对自定义导航的设计是:标题居中

随机推荐