在小程序中,可以使用自定义标题栏来实现在标题的左方添加返回键。下面是一种实现方式的代码示例:

wxml代码:

<!-- 自定义标题栏 -->
<view class="custom-titlebar">
  <view class="back-icon" bindtap="goBack"></view>
  <view class="title">标题</view>
</view>

wxss代码:

/* 自定义标题栏样式 */
.custom-titlebar {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
}

.back-icon {
  width: 20px;
  height: 20px;
  background-image: url("/images/back.png");
  background-size: cover;
  margin-left: 10px;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

js代码:

Page({
  goBack: function() {
    wx.navigateBack({
      delta: 1
    });
  }
})

json代码:

{
  "navigationBarTitleText": "",
  "usingComponents": {}
}

以上代码实现了一个自定义标题栏,其中使用了一个背景图片作为返回键的图标。点击返回键时,调用wx.navigateBack方法返回上一页。

注意,为了实现自定义标题栏,需要将navigationBarTitleText设置为空,这样系统的默认标题栏就会隐藏

微信小程序中怎么在标题的左方添加返回键jswxsswxmljson代码实现

原文地址: https://www.cveoy.top/t/topic/h2Fi 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录