微信小程序自定义渐变的tabbar导航栏功能

做为自己的一个小笔记，以免后面再用到

1，在需要自定义的界面的json文件中加入下面代码 "navigationStyle": "custom" ，隐藏系统导航栏

{
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "dark",
"usingComponents": {
},
"navigationStyle": "custom"
}

2，创建components 文件，为了方便复用
js 文件内容：

const app = getApp()
Component({
properties: {
defaultData: {
type: Object,
value: {
title: "默认标题"
},
observer: function (newVal, oldVal) {}
},
topOpacity: {
type: Number,
value: {
topOpacity: 0,
}
}
},
data: {
navBarHeight: app.globalData.navBarHeight,
menuRight: app.globalData.menuRight,
menuTop: app.globalData.menuTop,
menuHeight: app.globalData.menuHeight,
},
attached: function () {
},
methods: {
}
})

wxml文件内容：

<!-- 自定义顶部栏 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
<view class="nav-barback" style="height:{{navBarHeight}}px;opacity:{{topOpacity}}"></view>
<input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; left:{{menuRight}}px; top:{{menuTop}}px;"></input>
</view>
<!-- 占位，高度与顶部栏一样 -->
<view style="height:{{navBarHeight}}px;"></view>

wxss文件内容：

.nav-bar {
position: fixed;
width: 100%;
top: 0;
color: rgb(255, 255, 255);
/* background: rgb(255, 255, 255); */
z-index: 10000;
}
.nav-barback{
background-color: #FFD52F;
width: 100%;
position: relative;
top: 0;
z-index: 10001;
}
.nav-bar .search {
width: 60%;
color: #333;
font-size: 14px;
background: #fff;
position: absolute;
border-radius: 50px;
background: rgb(255, 255, 255);
padding-left: 14px;
z-index: 10002;
}

在需要使用的界面使用方法

1，在json中引入该components，

2，wxml中

<navigationBar default-data="{{defaultData}}" topOpacity="{{topOpacityFloat}}"></navigationBar>

3，js中，这个标题看需求后面可以替换搜索栏

defaultData: {
　　title: "我的主页", // 导航栏标题
},

4，该方法是监听当前界面滚动的回调，上滑时，自定义的背景色透明度会从0一直到1，达成渐变效果

onPageScroll(t){
let topOpacity = t.scrollTop / 100
console.log('topOpacity',t.scrollTop,topOpacity);
if (t.scrollTop < 10) {
topOpacity = 0
} else if (topOpacity >= 1) {
topOpacity = 1
}
this.setData({
topOpacityFloat: topOpacity
})
},

到此这篇关于微信小程序自定义渐变的tabbar导航栏的文章就介绍到这了,更多相关小程序自定义导航栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 小程序如何实现中间带加号的tabbar

    小程序如何实现中间带加号的tabbar

    目录 前言 首先新建一个tabbar的组件. html代码 js代码 在需要的页面引入组件 适用不同页面 设置tabbar选中状态 css代码 最终效果 总结 前言 相信大家也看过很多app或者小程序的tabbar中间是一个突出加号,这个用自带的组件无法实现,需要我们手动写一个tabbar的样式来实现效果.我们一起看看吧! 首先新建一个tabbar的组件. html代码 注意点:需要判断是否是iphonex系列的手机,这类手机需要设置高度.对于中间的加号突出的菜单,格外设置样式.直接使用了nav

  • 微信小程序如何根据不同用户切换不同TabBar(简单易懂!)

    微信小程序如何根据不同用户切换不同TabBar(简单易懂!)

    目录 现有需求: 1全局.app.json 2.自定义custom-tab-bar 结果展示 总结 现有需求: 小程序用户有三种身份(公众.运维人员.领导),根据不同用户身份显示不同的tabbar 众所周知微信小程序全局文件app.json里面的"tabBar"里面的list只能放置2-5个,要想实现3个tabbar,必须得复用tabbar,三种身份都需要个人中心,剩下的是长列表(两个),表单,图表 刚好是5个,废话少说,上代码 代码有点长,建议仔细看一下 1全局.app.json t

  • 小程序自定义tabBar组件封装

    小程序自定义tabBar组件封装

    本文实例为大家分享了小程序自定义tabBar组件封装的具体代码,供大家参考,具体内容如下 1.新建组件:在component下新建一个tabBar 2.组件的index.wxml结构如下: <cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" w

  • 关于微信小程序自定义tabbar问题详析

    关于微信小程序自定义tabbar问题详析

    目录 1.首先按照官方组件在app.json中定义tabbar 2.在项目根目录创建自定义tabbar组件 3.组件内容如下: 4.在pages下的各个页面组件引入tabbar 总结 1.首先按照官方组件在app.json中定义tabbar "tabBar": { "custom": true, "backgroundColor": "#FFFFFF", "borderStyle": "white

  • 微信小程序全局配置之tabBar实战案例

    微信小程序全局配置之tabBar实战案例

    目录 全局配置 - tabBar 1. 什么是 tabBar 2. tabBar 的 6 个组成部分 3. tabBar 节点的配置项 4. 每个 tab 项的配置选项 全局配置 - 案例:配置 tabBar 1. 需求描述 2. 实现步骤 3. 步骤1 - 拷贝图标资源 4.步骤2 - 新建 3 个对应的 tab 页面 5. 步骤3 - 配置 tabBar 选项 6. 完整的配置代码 总结 全局配置 - tabBar 1. 什么是 tabBar tabBar 是移动端应用常见的页面效果, 用于

  • 微信小程序自定义tabBar的步骤记录

    微信小程序自定义tabBar的步骤记录

    目录 1.前言 2.自定义tabBar样式 3.引入custom-tab-bar及相关配置 4.完整Demo 总结 1.前言 很多时候,小程序自带的tabBar不能够满足项目需求,这个时候就需要我们自定义tabBar了.但是在网上找了很久,基本都是存在切换时闪烁的问题.幸运的是从基础库2.5.0开始,可以官方使用自定义tabBar了. 2.自定义tabBar样式 如下图所示,我们需要一个展示"首页"."我的",和一个可以点击跳转到发布的tabBar.这种样式,原生的

  • 微信小程序tabBar组件切换与下拉刷新实现详解

    目录 前言 一.tabBar切换 1.为什么使用tabBar 2.注意事项 3.如何使用 二.下拉刷新 前言 基本上,所有的小程序,页面底部都有个tab,来实现页面的切换,效果如下 一.tabBar切换 1.为什么使用tabBar 在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能.在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab. 2.

  • 微信小程序自定义渐变的tabbar导航栏功能

    微信小程序自定义渐变的tabbar导航栏功能

    做为自己的一个小笔记,以免后面再用到 1,在需要自定义的界面的json文件中加入下面代码 "navigationStyle": "custom" ,隐藏系统导航栏 { "navigationBarTitleText": "", "navigationBarBackgroundColor": "#000", "navigationBarTextStyle": "

  • 微信小程序自定义tab实现多层tab嵌套功能

    微信小程序自定义tab实现多层tab嵌套功能

    小程序最近是越来越火了-- 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧. 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab... 这种变态需求只能自定义tab了. 其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷. 官方 tabBar 地址:https://developers.weixin.qq.... 一.Demo结构 先看效果图吧

  • 微信小程序实现的动态设置导航栏标题功能示例

    微信小程序实现的动态设置导航栏标题功能示例

    本文实例讲述了微信小程序实现的动态设置导航栏标题功能.分享给大家供大家参考,具体如下: 场景 当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分.就需要开发者在页面加载的时候进行动态设置导航标题! 实现API wx.setNavigationBarTitle(OBJECT) 语法 wx.setNavigationBarTitle({ title: '当前页面', //页面标题 success: () => {}, //接口调用成功的

  • 微信小程序自定义单选框样式实现单选功能

    微信小程序自定义单选框样式实现单选功能

    本文实例为大家分享了微信小程序自定义单选框样式实现单选功能的具体代码,供大家参考,具体内容如下 实现效果: 选择小车时,其他类型的车取消选中. 具体思路: 用数组存几种类型车的数据,给每条数据设置点击未选中的效果(checked 设为 false).点击某一种车时,获取其下标,将它的设置为选中(checked 设置 true). 代码如下: // index.js Page({   /**    * 页面的初始数据    */   data: {     list: [{         img

  • uniapp开发微信小程序自定义顶部导航栏功能实例

    uniapp开发微信小程序自定义顶部导航栏功能实例

    目录 自定义导航栏渐变色,先上效果 重点来了,导航栏设置渐变色 补充:更换图标 总结 自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText

  • 微信小程序自定义导航隐藏和显示功能

    微信小程序自定义导航隐藏和显示功能

    微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码: <!--index.wxml--> <view class="navView" bi

  • 微信小程序自定义导航栏实例代码

    微信小程序自定义导航栏实例代码

    背景 在做快狗打车小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果 左上角的事件无法监听.定制 路由导航单一,只能够返回上一页,深层级页面的返回不够友好 我们希望的是:在各个机型页面上title一致性 & 个性化展示.取得左上角点击事件控制权及深层级页面的一键返回 实现 step1 自定义 第一步 取得导航栏的控制权 小程序支持自定义导

  • 微信小程序自定义tabBar组件开发详解

    微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabbar模板. template/template.wxml <template name="tabBar"> <view class="tabBar"> <block wx:for="{{tabBar}}" wx:for-item="ite

  • 微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

    微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

    本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能.分享给大家供大家参考,具体如下: 顶部滚动选项卡 话不多说,直接上代码 pages/home/home.wxml <scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '> <!-- tab --> <view class="tab"> <view class=&qu

  • 微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题

    这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题,还是不要贸然的上了,所以用老版本的替换所有页面的小程序头来做. ​ 参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题,还有因为IOS的橡皮筋效果,对IOS端不太友好,屏幕会乱划.所以针对性的改动了这些功能,因为才学小程序两三天,所以其中踩了很多坑,但好在最后效果还是达到了. 下面是效

随机推荐