小程序干活系列----实现常见一些功能按钮（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布局时我的思想

父元素先设为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;
}

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

感觉动手试试吧

码云：https://gitee.com/mrxu314/xcx_gh

gitHub：https://github.com/mrxu0/xcx_gh

想第一手看到我发布的微博可以关注我的公众号，吵吵日
4000
记，期待你的加入