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

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

• JavaScript
yizhihongxing

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

一、胶囊按钮返回

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

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

<!-- 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实现base64的加密解密方法示例

    关于JavaScript实现base64加密和解密的方法，以下是完整的攻略： 什么是base64？ Base64是一种基于64个可打印字符来表示二进制数据的表示方法，它通常用于在HTTP协议下传输二进制数据。 base64的原理 将三个字节的二进制数据编码为四个字符的ASCII文本数据。具体方法是，将3个字节作为一个整体，对其进行位运算，转换成4个6位的数字…

    JavaScript 2023年5月19日
    00

  • js字符串转换为对象格式的三种方法总结

    下面详细讲解一下“js字符串转换为对象格式的三种方法总结”的完整攻略。 标题 js字符串转换为对象格式的三种方法总结 正文 在日常开发中，我们经常需要将字符串转换成对象格式。下面总结了三种常用的方法： 方法一：eval() eval()是一种将字符串解析成js代码并运行的方法。通过将字符串转成函数执行，在函数内部给一个对象赋值并将它的引用返回。 示例代码： …

    JavaScript 2023年5月27日
    00

  • JavaScript实现DOM对象选择器

    实现DOM对象选择器是JavaScript编程中最常用的功能之一。下面是详细讲解如何使用JavaScript实现DOM对象选择器的完整攻略： 1. 理解DOM对象选择器 在开发Web应用中，我们需要频繁地访问和操作网页元素。而每个网页元素都是一个DOM对象，可以通过JavaScript的DOM对象选择器来获取它们。DOM对象选择器可以根据元素的标签、类名、I…

    JavaScript 2023年6月10日
    00

  • 微信JS接口汇总及使用详解

    微信JS接口汇总及使用详解 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。本文将详细讲解微信JS-SDK的封装使用以及开发中常用到的接口。 1. 前置准备 1.1 获取授权 在使用微信JS-SDK之前，你需要先申请一个公众号并获得授权。具体流程请查看微信公众平台文档。 1.2 引入JS文件 <script src=&qu…

    JavaScript 2023年6月10日
    00

  • JavaScript do while使用方法

    JavaScript中do while语句是一种循环语句，它会重复执行一段代码块，直到指定条件不再满足为止。与while语句不同，首先会执行一次循环体的代码，然后才会进行条件判断。因此，do while语句至少会执行一次。 语法： do { // 循环体代码 } while (condition); 循环体代码：要执行的代码块，包含在花括号内。 condit…

    Web开发基础 2023年3月30日
    00

  • vue+springboot图片上传和显示的示例代码

    下面是详细的”vue+springboot图片上传和显示的示例代码”攻略： 1. 前端部分 1.1 Vue组件设计 首先，我们需要设计一个Vue组件，用于上传图片。在组件中包含一个input元素和一个button元素，其中input的类型为file，这样用户就可以通过点击button选取图片。 <template> <div> &lt…

    JavaScript 2023年6月11日
    00

  • JS防止网页被嵌入iframe框架的方法分析

    基础方法 如果我们想要阻止我们的网页被嵌入在 iframe 框架中，可以在代码中加入以下的 JS 代码： if (self != top) { top.location.href = self.location.href; } 这段代码的作用是检测当前页面是否在顶级窗口中打开，如果不是顶级窗口，那么将会通过修改顶级窗口的 URL 来让页面跳出框架。 利用 X…

    JavaScript 2023年6月11日
    00

  • Javascript中的 “&” 和 “|” 详解

    当我们使用JavaScript进行位操作时，可能会遇到“&”和“|”这两个符号。这两个符号分别代表按位与和按位或操作。在本文中，我们将深入讲解“&”和“|”这两个符号的详细用法。 按位与操作（&） 按位与操作的基本规则是，将两个二进制数字进行按位与操作，对于相同位置的二进制数字，当且仅当两个数字都是1时，结果为1，否则结果为0。 代码…

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