脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序自定义导航栏

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

 更新时间：2022年09月14日 09:44:08   作者：平凡的不平凡  
这篇文章主要介绍了微信小程序自定义渐变的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导航栏的文章就介绍到这了,更多相关小程序自定义导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现的点击按钮图片上下滚动效果示例

    JS实现的点击按钮图片上下滚动效果示例

    这篇文章主要介绍了JS实现的点击按钮图片上下滚动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • Ajax 加载数据 练习代码

    Ajax 加载数据 练习代码

    这篇文章主要介绍了Ajax 加载数据，主要是为了查询表的显示，不用嵌入php通过ajax调用，现在手机端的更多显示功能都是通过ajax实现的
    2017-01-01
  • JS运动特效之链式运动分析

    JS运动特效之链式运动分析

    这篇文章主要介绍了JS运动特效之链式运动,结合实例形式分析了javascript链式运动的原理与具体实现技巧,需要的朋友可以参考下
    2018-01-01
  • js实现横向伸展开的二级导航菜单代码

    js实现横向伸展开的二级导航菜单代码

    这篇文章主要介绍了js实现横向伸展开的二级导航菜单代码,涉及javascript鼠标事件及页面元素遍历的相关技巧,需要的朋友可以参考下
    2015-08-08
  • 详解JavaScript如何利用异步解密回调地狱

    详解JavaScript如何利用异步解密回调地狱

    为了更好地处理这些异步操作,JavaScript 引入了异步编程的概念,这篇文章主要来和大家详细聊聊JavaScript中异步的相关应用,希望对大家有所帮助
    2024-02-02
  • js阻止移动端页面滚动的两种方法

    js阻止移动端页面滚动的两种方法

    本文主要介绍了js阻止移动端页面滚动的两种方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 使用contextMenu插件实现Bootstrap table弹出右键菜单

    使用contextMenu插件实现Bootstrap table弹出右键菜单

    如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中，其中“开发高效，设备兼容”的特点表现得非常明显。这篇文章主要介绍了使用contextMenu插件实现Bootstrap table弹出右键菜单,需要的朋友可以参考下
    2017-02-02
  • js仿淘宝和百度文库的评分功能

    js仿淘宝和百度文库的评分功能

    这篇文章主要为大家详细介绍了js仿淘宝和百度文库的评分功能的相关代码和实现思路,具有一定的参考价值，需要的朋友可以参考下
    2016-05-05
  • JS实现DIV容器赋值的方法

    JS实现DIV容器赋值的方法

    这篇文章主要介绍了JS实现DIV容器赋值的方法,可结合ajax使用,涉及JavaScript针对页面元素的动态操作技巧,需要的朋友可以参考下
    2015-12-12
  • 理解javascript封装

    理解javascript封装

    这篇文章主要帮助大家理解学习javascript封装，通过封装可以强制实施信息隐藏，本文为大家分析了封装的利弊，感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论