Want to achieve the effect shown in the following figure:
The implementation method is to place a view on the back button in the upper left corner, a view on the title, and a view with the same width as the back button on the far right.
page:
<view class="toptext">
<view class="backIcon" bindtap="goBack">
<image src="../../images/iv_back.png" style="width: 100%; height: 100%;"></image>
</view>
<view class="title">
<text>Profile</text>
</view>
<view class="backIcon">
<text><!--Equal width to the left back button--></text>
</view>
</view>
style:
.toptext
{
display: flex;
width: 100%;
background-color: blue;
height: 100rpx;
color: white;
}
.backIcon
{
width: 90rpx;
height:100%;
}
.title
{
display: flex;
width: 100%;
justify-content: center; //horizontally centered
align-items: center; //vertically centered
height: 100%;
}
Let's add borders to the three views to see the implementation principle:
