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

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

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

一、胶囊按钮返回

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

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

<!-- 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来实现。以下是实现步骤：

首先，需要在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>

然后，在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;
}

最后，在页面的逻辑层中，实现对导航栏的控制，例如：

// 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'
         })
      }
   }
})

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

一、胶囊按钮返回

二、自定义导航栏

基础教程推荐