微信小程序,用flex实现后退按钮靠左,标题居中的一种思路

想实现如下图所示的效果:

实现方法是,一个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加上边框,看下实现原理:

猜你喜欢

转载自blog.csdn.net/y523648/article/details/131063011
今日推荐