小程序干活系列----实现常见一些功能按钮（flex布局）

1.实现常见的个人界面经常使用的功能组，很少说先上图 

本文重点讲的是： 

上面这张图相信不少人都不陌生，可是要如何横竖细缝的都很正规呢请看下面的代码

wxml代码

<view class='item'>
  <image class='left' src='/img/phone-2.png'></image>
  <view class='center'>电话咨询</view>
  <image class='left' src='/img/right-head.png'></image>
</view>

wxss代码

.item{  display: flex;  
        flex-direction: row;  
        height: 102rpx;  
        color: white;  
        font-size: 25rpx;  
        align-items: center;  
        background-color: #262932;}

.item image{  
        height:33rpx;  
        width:33rpx;}

.item .left{  margin: 0 40rpx;}

.item .right{  margin-right: 27rpx;}

.item .center{  flex: 1;}

没有什么高深的东西，相信初学者的你也能看懂，须要注意的地方主要是flex布局时个人思想

1. 父元素先设为flex布局

2. 添加align-items: center;

3. 中间的内容值设置flex:1实现自动补满宽度

实现带图标的按钮 

你一看，这个不是自带的button就有这个 功能么，那为何仍是先他，说一下楼主的初衷吧，有些图标微信是不提供的，并且补充别的图标还比较麻烦，不如直接使用image。导入图标的能够直接出门了，哈哈

wxml代码：

   <view class='button-i'>
        <image src='/img/point.png'></image>
        <view>赞扬</view>
    </view>

wxss代码：

.button-i{  
        border:1px solid #ffd20d;  
        background-color: #ffd20d;  
        padding:10rpx 30rpx;  
        text-align: center;  
        border-radius: 6px;  
        display: inline-flex;  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  
        width:208rpx;  
        height:50rpx;
}

.button-i image{  
        height:50rpx;  
        width:50rpx;  
        display: inline-block;
}

这里也采用的flex布局，主要思想是吧图片变为了行内元素，经过justify-content: center和align-items: center;来实现的垂直居中显示

感受动手试试吧

想第一手看到我发布的微博能够关注个人公众号，吵吵日记，期待你的加入 

本文分享自微信公众号 - 点滴前端（DDIWEB）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。