小程序幹活系列----實現常見一些功能按鈕（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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。