1. Python技术站首页
  2. 其他
  3. JavaScript

详解微信小程序胶囊按钮返回|首页自定义导航栏功能

• JavaScript

下面是详解微信小程序胶囊按钮返回|首页自定义导航栏功能的完整攻略：

一、胶囊按钮返回

微信小程序提供了一个叫做胶囊按钮的组件，位于小程序右上角，它包含了小程序的图标和名称，并且还具备返回功能。我们可以使用它来方便地返回上一个页面，以下是实现方法：

首先，在页面的顶部布局一个用于显示胶囊按钮的容器：

<!-- wxml -->
<view class="navbar">
   <view class="nav-left"></view>
   <view class="nav-title">首页</view>
   <view class="nav-right"></view>
</view>

在样式表中，设置容器的定位和样式：

/* wxss */
.navbar {
   height: 44px;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
}

.navbar .nav-left {
   height: 100%;
   width: 88rpx;
   position: absolute;
   top: 0;
   left: 0;
}

.navbar .nav-right {
   height: 100%;
   width: 88rpx;
   position: absolute;
   top: 0;
   right: 0;
}

.navbar .nav-title {
   height: 100%;
   line-height: 44px;
   text-align: center;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
}

然后，在逻辑层中监听胶囊按钮的点击事件，并实现返回：

// js
onLoad: function (options) {
   wx.showShareMenu({
      withShareTicket: true
   })

   wx.getSystemInfo({
      success: res => {
         this.setData({
            statusBarHeight: res.statusBarHeight,
            navBarHeight: res.statusBarHeight + 44
         })
      }
   })

   /* 动态计算箭头图标距离顶部的距离 */
   var query = wx.createSelectorQuery();
   query.select('.nav-left').boundingClientRect();
   query.exec((res) => {
      this.setData({
         arrowTop: res[0].top + ((res[0].height - 28) / 2)
      })
   })
},
back: function () {
   console.log("返回")
   wx.navigateBack({
      delta: 1
   })
},

最后，在胶囊按钮容器中添加一个返回箭头图标，并绑定单击事件：

<!-- wxml -->
<view class="navbar">
   <view class="nav-left" bindtap="back">
      <image src="../../images/nav-back.png" class="nav-back-icon" style="top:{{arrowTop}}px"></image>
   </view>
   <view class="nav-title">首页</view>
   <view class="nav-right"></view>
</view>

上述代码中，我们在容器中添加了一个图片标签，图标的路径是'../../images/nav-back.png'，可以替换成任意自定义的图片，要注意调整其尺寸和位置，以保证其与胶囊按钮的样式一致。图片单击操作可以绑定back函数，该函数通过调用navigateBack方法来实现返回功能。

二、自定义导航栏

有时候，我们需要在小程序界面中实现自定义的导航栏，这需要我们借助于wxml和wxss来实现。以下是实现步骤：

  1. 首先，需要在wxml中定义导航栏的结构，例如：
<!--wxml-->
<view class="navbar">
   <view class="nav-left" bindtap="back">
      <image src="../../images/nav-back.png" class="nav-back-icon" style="top:{{arrowTop}}px"></image>
   </view>
   <view class="nav-title">首页</view>
   <view class="nav-right"></view>
</view>
  1. 然后，在wxss中定义导航栏的样式，例如：
.navbar {
   height: 44px;
   width: 100%;
   background-color: #fff;
   box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.3);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.navbar .nav-left {
   height: 100%;
   width: 88rpx;
   display: flex;
   justify-content: center;
   align-items: center;
}

.navbar .nav-right {
   height: 100%;
   width: 88rpx;
   display: flex;
   justify-content: center;
   align-items: center;
}

.navbar .nav-title {
   font-size: 18px;
   font-weight: bold;
}
  1. 最后，在页面的逻辑层中，实现对导航栏的控制，例如：
// js
onLoad: function (options) {
   wx.getSystemInfo({
      success: res => {
         this.setData({
            statusBarHeight: res.statusBarHeight,
            navBarHeight: res.statusBarHeight + 44
         })
      }
   })

   /* 动态计算箭头图标距离顶部的距离 */
   var query = wx.createSelectorQuery();
   query.select('.nav-left').boundingClientRect();
   query.exec((res) => {
      this.setData({
         arrowTop: res[0].top + ((res[0].height - 28) / 2)
      })
   })
},

back: function () {
   console.log("返回")
   wx.navigateBack({
      delta: 1
   })
},

如此，我们就成功地实现了自定义导航栏和返回按钮的功能。

示例说明：

可以在项目实践中，根据自己的需求，对导航栏样式、胶囊按钮样式及单击事件等进行自定义，例如，可以将导航栏的背景色、图标样式、标题名称等进行修改，同时也可以实现其他效果，如滑动隐藏导航栏、右侧添加更多菜单等。以下是一个例子：

<!--wxml-->
<view class="navbar">
   <view class="nav-left" bindtap="back">
      <image src="../../images/left-arrow.png" class="nav-back-icon" style="width: 15rpx; height: 28rpx"></image>
   </view>
   <view class="nav-title">自定义导航栏</view>
   <view class="nav-right" bindtap="more">
      <image src="../../images/more.png" class="nav-back-icon" style="width: 24rpx; height: 24rpx"></image>
   </view>
</view>

.navbar {
   height: 44px;
   width: 100%;
   background-color: #fff;
   box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.3);
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   transition: top .3s ease-out;
}

.navbar.hide {
   top: -44px;
}

.navbar .nav-left {
   height: 100%;
   width: 88rpx;
   display: flex;
   justify-content: center;
   align-items: center;
}

.navbar .nav-right {
   height: 100%;
   width: 88rpx;
   display: flex;
   justify-content: center;
   align-items: center;
}

.navbar .nav-title {
   font-size: 18px;
   font-weight: bold;
}

.navbar .nav-left img,
.navbar .nav-right img {
   display: block;
}

// js
Page({
   data: {
      navbarHeight: 44,
      arrowTop: 10
   },
   onLoad: function (options) {
      wx.getSystemInfo({
         success: (res) => {
            this.setData({
               navbarHeight: res.statusBarHeight + 44
            })
         },
      })

      /* 动态计算箭头图标距离顶部的距离 */
      var query = wx.createSelectorQuery();
      query.select('.nav-left').boundingClientRect();
      query.exec((res) => {
         this.setData({
            arrowTop: res[0].top + ((res[0].height - 28) / 2)
         })
      })
   },
   back: function () {
      wx.navigateBack({
         delta: 1
      })
   },
   more: function () {
      wx.showActionSheet({
         itemList: ['Item1', 'Item2', 'Item3'],
         success: function (res) {
            if (!res.cancel) {
               console.log(res.tapIndex)
            }
         }
      })
   },
   onPageScroll: function (e) {
      if (e.scrollTop > 44) {
         this.setData({
            navbarClass: 'navbar hide'
         })
      } else {
         this.setData({
            navbarClass: 'navbar'
         })
      }
   }
})

上述代码，为导航栏添加了滑动隐藏、右侧增加更多按钮等额外功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解微信小程序胶囊按钮返回|首页自定义导航栏功能 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • vscode 对 typescript代码调试的步骤

    下面是详细讲解“vscode 对 TypeScript 代码调试的步骤”的完整攻略： 步骤一：安装插件 在使用 vscode 进行 TypeScript 调试之前，我们需要先安装一个适合于 TypeScript 的插件：Debugger for Chrome。 安装方式如下： 在 vscode 左侧侧边栏的面板中选择 Extensions 按钮； 搜索 De…

    JavaScript 2023年6月11日
    00

  • 微信小程序单选框自定义赋值

    微信小程序中的单选框组件通常会使用预设选项进行赋值。但有时候，我们需要自定义单选框的选项内容和值。下面是一些实现自定义单选框赋值的方法： 方式一：使用wx:for循环渲染视图和数据 我们可以使用wx:for指令和数组来实现自定义单选框赋值。首先，定义一个数组用于存储单选框的选项，数组中每一项表示单选框的一个选项，包含一个name属性表示选项文本，一个valu…

    JavaScript 2023年6月11日
    00

  • IE8 内存泄露(内存一直增长 )的原因及解决办法

    IE8 内存泄露问题是前端开发中经常遇到的一个问题，如果不及时解决，会导致浏览器卡顿、页面多次刷新等问题。本文将详细介绍 IE8 内存泄露问题的原因及解决办法。 原因 在 IE8 环境下，如过开发中出现以下几种情况，它们有可能会导致内存泄露问题： 循环引用 在 IE8 中，如果对象之间发生了循环引用，可能会导致内存泄露。例如，如果一个对象 A 中包含了一个对…

    JavaScript 2023年6月10日
    00

  • 如何使用JS中的webWorker

    下面是有关如何使用JS中的webWorker的完整攻略。 什么是Web Worker? Web Worker是JavaScript技术的一部分，它提供了一种在后台运行JavaScript代码的方法，该方法不会影响用户界面的响应能力。Web Worker类似于多线程，它可以在后台执行计算密集型的任务，而不会影响到主线程和用户界面。 如何创建及使用Web Wor…

    JavaScript 2023年5月28日
    00

  • JavaScript中获取时间的函数集

    下面是详细讲解 JavaScript 中获取时间的函数集的完整攻略。 一、获取当前时间的函数 JavaScript 中获取当前时间可以使用 Date 类，通过 new Date() 实例化出一个日期对象，再通过该对象的方法获取当前时间。 //获取当前时间 var date = new Date(); console.log(date) // 输出日期 上述代…

    JavaScript 2023年5月27日
    00

  • js数组相减简单示例【删除a数组所有与b数组相同元素】

    下面是针对js数组相减简单示例【删除a数组所有与b数组相同元素】的完整攻略： 步骤一：创建两个数组 首先我们需要创建两个数组，分别是a数组和b数组。可以通过以下代码创建： const a = [1, 2, 3, 4, 5]; const b = [3, 4, 5, 6, 7]; 步骤二：使用filter方法过滤出不同元素 接下来我们需要使用数组的filter…

    JavaScript 2023年5月28日
    00

  • JavaScript sup方法入门实例（把字符串显示为上标）

    下面是详细的讲解。 JavaScript sup 方法入门实例（把字符串显示为上标） 什么是 sup 方法？ sup 是 JavaScript 中字符串对象的方法之一，用于将指定文本显示为上标，即像 x²（表示 x 的平方）这样的效果。 sup 方法语法 stringObject.sup() 其中，stringObject 为要进行上标处理的字符串。 sup…

    JavaScript 2023年5月28日
    00

  • JavaScript中几个重要的属性(this、constructor、prototype)介绍

    当我们学习JavaScript时，一定会接触到几个重要的属性：this、constructor、prototype。 this this 是 JavaScript 中非常重要的关键字，其指向的是当前函数执行上下文的对象。在不同的环境中，this 的指向也会不同。 在全局作用域中，this 指向的是 window 对象。 在函数中，this 的指向会根据函数的…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部