想实现如下图所示的效果:
实现方法是,一个view放左上角的后退按钮,一个view放标题,一个与后退按钮等宽的view在最右侧。
页面:
<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>个人资料</text>
</view>
<view class="backIcon">
<text><!--与左边的后退按钮等宽度--></text>
</view>
</view>
样式:
.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; //水平居中
align-items: center; //垂直居中
height: 100%;
}
我们把三个view加上边框,看下实现原理: