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

本文链接：https://blog.youkuaiyun.com/m0_37479946/article/details/79733587

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布局时我的思想

父元素先设为flex布局
添加align-items: center;
中间的内容值设置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;
}