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日

相关文章

  • 由 JavaScript 的 with 引发的探索

    标题：由 JavaScript 的 with 引发的探索 背景 JavaScript 中的 with 关键字让你可以在代码中使用更简洁的语法来访问一个对象的属性。然而，使用 with 带来的优雅语法留下的是性能问题。本文将介绍如何使用 JavaScript 的基本概念和语法，避免 with 带来的问题。 问题 使用 with 增加了用于作用域查找的代码，导致…

    JavaScript 2023年6月11日
    00

  • T-SQL篇如何防止SQL注入的解决方法

    下面是T-SQL篇如何防止SQL注入的解决方法的完整攻略。详细说明了什么是SQL注入、其危害性和如何避免SQL注入攻击。 什么是SQL注入？ SQL注入是一种利用SQL查询语句中存在漏洞的攻击方式，攻击者通过输入恶意的SQL代码，使数据库执行非预期的操作。攻击者可以通过注入恶意代码来窃取、篡改、删除或者更改数据库中的数据。 SQL注入的危害性 SQL注入攻击…

    JavaScript 2023年6月11日
    00

  • 使用jsonp完美解决跨域问题

    使用 JSONP (JSON with Padding) 是一种解决跨域问题的常见方式。下面是使用 JSONP 完美解决跨域问题的攻略。 什么是JSONP（跨域协议） JSONP 是利用script标签跨域的一个技巧。简单地说，就是通过动态创建 script 标签，向其他域请求数据，该域返回数据时会调用一个 callback 函数，一般在前端代码中定义。 使…

    JavaScript 2023年5月27日
    00

  • js fetch异步请求使用实例详解

    下面是关于“js fetch异步请求使用实例详解”的完整攻略。 什么是fetch？ Fetch 是一个基于 Promise 的 HTTP 请求 API，它是一种用于网络资源获取的新标准。 相对 XMLHttpRequest（XHR），它提供了更加简洁易用的接口，同时还支持更多的功能，如请求取消、跨域请求等。 fetch 最基本的使用方式 fetch 最简单的…

    JavaScript 2023年5月28日
    00

  • js局部刷新页面时间具体实现

    实现JS局部刷新页面的两种常见方式是使用JS内置的location.reload()方法和使用AJAX请求后台返回的数据来更新页面。 使用location.reload()方法刷新页面 location.reload()方法可以重新加载当前页面，如果传入参数true则会强制从服务器重新加载页面，但是这种方式会刷新整个页面，无法局部刷新。因此，我们可以通过在J…

    JavaScript 2023年5月27日
    00

  • 正则表达式RegExp语法与用法详解

    正则表达式RegExp语法与用法详解 什么是正则表达式？ 正则表达式是一种通用的字符匹配模式，可以用来进行字符串的查找替换、格式验证等操作。在许多编程语言中都具有很重要的地位。 正则表达式定义 一个正则表达式是由普通字符（例如字符 a 到 z ）以及特殊字符（称为元字符）组成的文字模式。模式描述了要匹配的字符类型或顺序。 在JavaScript中，使用Reg…

    JavaScript 2023年6月10日
    00

  • 浅谈ajax在jquery中的请求和servlet中的响应

    AJAX在jQuery中的请求 1.1 基本概念 AJAX是浏览器与服务器之间异步传输数据的一种技术，可以在不刷新整个页面的情况下更新页面的部分内容。jQuery是一个JavaScript库，常用于进行AJAX请求。 1.2 使用方法 使用jQuery发送AJAX请求的基本语法如下： $.ajax({ type: "POST", // G…

    JavaScript 2023年6月11日
    00

  • 在JavaScript中如何解决用execCommand(

    在JavaScript中，可以使用execCommand()方法来执行一些富文本编辑操作，如加粗、斜体、插入链接等。下面是一些解决execCommand()的方法以及示例说明。 方法一：使用document.execCommand() 使用document.execCommand()方法可以直接执行一些富文本编辑操作，如下示例代码演示了如何在文本框中插入一段…

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