微信小程序中怎么在标题的左方添加返回键jswxsswxmljson代码实现
在小程序中,可以使用自定义标题栏来实现在标题的左方添加返回键。下面是一种实现方式的代码示例:
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设置为空,这样系统的默认标题栏就会隐藏
原文地址: https://www.cveoy.top/t/topic/h2Fi 著作权归作者所有。请勿转载和采集!