【详细】小程序仿支付宝APP实现

展示效果，做的支付宝首页，代码如下，本质是探究flex布局的用法

wxss css代码

/**index.wxss**/
.blue-group{
  background: #1e82d2;
  padding: 20rpx;
}

.blue-group .top-group{
  height: 58rpx;
  width: 100%;
  display: flex;
}

.top-group .search-group{
  flex: 1;
  display: flex;
}

.top-group .search-group .search-input{
  flex: 1;
  background: #1a71b7;
  border-radius: 4px;
  padding: 0 10rpx;
  font-size: 24rpx;
  color: #ffffff;
}

.top-group .search-group .placeholder-input{
  color: #fff;
}

.top-group .more-group{
  flex-basis: 180rpx;
  display: flex;
  justify-content: space-evenly;
}

.top-group .more-group image{
  width: 50rpx;
  height: 50rpx;
}

.blue-group .main-menu-group{
  margin-top: 30rpx;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

.main-menu-group .main-menu{
  width: 100rpx;
  height: 120rpx;
  text-align: center;
}

.main-menu-group .main-menu image{
  width: 70rpx;
  height: 70rpx;
}

.main-menu-group .main-menu text{
  font-size: 32rpx;
  color: #fff;
}

.white-group{
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 20rpx;
}

.white-group .menu-group{
  width: 180rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.white-group .menu-group image{
  width: 54rpx;
  height: 50rpx;
}

.white-group .menu-group text{
  font-size: 32rpx;
}

 wxml文件

<!--index.wxml-->
<view class="container">
  <view class='blue-group'>
    <view class='top-group'>
      <view class='search-group'>
        <input class='search-input' placeholder-class='placeholder-input' placeholder='蚂蚁花呗'></input>

      </view>
      <view class='more-group'>
        <image src='images/01.png'></image>
        <image src='images/02.png'></image>
      </view>
    </view>
    <view class='main-menu-group'>
      <view class='main-menu'>
        <image src='images/1.png'></image>
        <text>扫一扫</text>
      </view>
      <view class='main-menu'>
        <image src='images/2.png'></image>
        <text>付钱</text>
      </view>
      <view class='main-menu'>
        <image src='images/3.png'></image>
        <text>收钱</text>
      </view>
      <view class='main-menu'>
        <image src='images/4.png'></image>
        <text>卡包</text>
      </view>
    </view>
  </view>
  <view class='white-group'>
    <view class='menu-group'>
      <image src='images/5.png'></image>
      <text>转账</text>
    </view>
    <view class='menu-group'>
      <image src='images/6.png'></image>
      <text>信用卡还款</text>
    </view>
    <view class='menu-group'>
      <image src='images/7.png'></image>
      <text>充值中心</text>
    </view>
    <view class='menu-group'>
      <image src='images/8.png'></image>
      <text>余额宝</text>
    </view>
    <view class='menu-group'>
      <image src='images/9.png'></image>
      <text>淘票票电影</text>
    </view>
    <view class='menu-group'>
      <image src='images/10.png'></image>
      <text>滴滴出行</text>
    </view>
    <view class='menu-group'>
      <image src='images/11.png'></image>
      <text>生活缴费</text>
    </view>
    <view class='menu-group'>
      <image src='images/12.png'></image>
      <text>芝麻信用</text>
    </view>
    <view class='menu-group'>
      <image src='images/13.png'></image>
      <text>火车票机票</text>
    </view>
    <view class='menu-group'>
      <image src='images/14.png'></image>
      <text>蚂蚁借呗</text>
    </view>
    <view class='menu-group'>
      <image src='images/15.png'></image>
      <text>高德打车</text>
    </view>
    <view class='menu-group'>
      <image src='images/16.png'></image>
      <text>更多</text>
    </view>
  </view>
</view>