脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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导航栏的文章就介绍到这了,更多相关小程序自定义导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序实现多行文字超出部分省略号显示功能

    微信小程序实现多行文字超出部分省略号显示功能

    这篇文章主要介绍了微信小程序实现多行文字 超出部分省略号显示功能，比如设置只显示2行，超出部分省略号显示，本文通过实例代码给大家介绍,需要的朋友可以参考下
    2019-10-10
  • JavaScript的Proxy对象详解

    JavaScript的Proxy对象详解

    这篇文章主要为大家介绍了JavaScript的Proxy对象，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • js判断浏览器类型及设备（移动页面开发）

    js判断浏览器类型及设备（移动页面开发）

    这篇文章主要介绍了js判断浏览器类型及设备（移动页面开发）,需要的朋友可以参考下
    2015-07-07
  • 微信小程序仿微信运动步数排行(交互)

    微信小程序仿微信运动步数排行(交互)

    这篇文章主要介绍了微信小程序仿微信运动步数排行(交互)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • js实现微信分享代码

    js实现微信分享代码

    这篇文章主要介绍了js实现微信分享朋友链接显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js 自定义个性下拉选择框示例

    js 自定义个性下拉选择框示例

    下拉选择框想必大家并不陌生，一边情况下都是使用默认的，为了打破传统，下面与大家分享下使用js自定义下拉选择框示例代码,感兴趣的朋友可以参考下
    2013-08-08
  • javascript设置金额样式转换保留两位小数示例代码

    javascript设置金额样式转换保留两位小数示例代码

    本文为大家介绍下javascript设置金额样式即保留两位小数，下面有个不错的教程，需要的朋友可以了解下
    2013-12-12
  • js正则表达式验证邮件地址

    js正则表达式验证邮件地址

    这篇文章主要介绍了js正则表达式验证邮件地址，利用javaScript语言实现一下电子邮件地址验证程序，使用的是JavaScript语言的正则表达式库，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js页面跳转的常用方法整理

    js页面跳转的常用方法整理

    跳转页面的方法有很多，在本文整理了一些比较常用，并有示例代码，感兴趣的朋友可以参考下
    2013-10-10
  • Js逆向实现滑动验证码图片还原的示例代码

    Js逆向实现滑动验证码图片还原的示例代码

    这篇文章主要介绍了Js逆向实现滑动验证码图片还原的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03

最新评论