微信小程序:flex布局实现换行

1、关键代码.wxml:

复制代码
<view class="pay margin-top-40">
    <view class="info">
      <view class="pay-info-title margin-left-22 flex-start"> 请选择充值金额</view>

      <view class="flex-wrap margin-top-20">
        <view class="pay-item-select flex-center margin-left-22">
          <view class="pay-item-detail flex-center">
            <view>
              <view class="pay-item-detail-top flex-start">
                <view class="pay-jbi flex-center">
                  <image src="https://images.xxx.com/my_pay_jinbi.png" />
                </view>
                <view class="pay-item-detail-top-money flex-center">80</view>
              </view>
              <view>¥ 80.00</view>
            </view>
          </view>
        </view>

        <view class="pay-item flex-center margin-left-22">
          <view class="pay-item-detail flex-center">
            <view>
              <view class="pay-item-detail-top flex-start">
                <view class="pay-jbi flex-center">
                  <image src="https:/images.xxx.com/my_pay_jinbi.png" />
                </view>
                <view class="pay-item-detail-top-money flex-center">80</view>
              </view>
              <view>¥ 80.00</view>
            </view>
          </view>
        </view>

        <view class="pay-item flex-center margin-left-22">
          <view class="pay-item-detail flex-center">
            <view>
              <view class="pay-item-detail-top flex-start">
                <view class="pay-jbi flex-center">
                  <image src="https://images.xxx.com/my_pay_jinbi.png" />
                </view>
                <view class="pay-item-detail-top-money flex-center">80</view>
              </view>
              <view>¥ 80.00</view>
            </view>
          </view>
        </view>

        <view class="pay-item flex-center margin-left-22">
          <view class="pay-item-detail flex-center">
            <view>
              <view class="pay-item-detail-top flex-start">
                <view class="pay-jbi flex-center">
                  <image src="https://images.xxxx.com/my_pay_jinbi.png" />
                </view>
                <view class="pay-item-detail-top-money flex-center">80</view>
              </view>
              <view>¥ 80.00</view>
            </view>
          </view>
        </view>

        <view class="pay-item flex-center margin-left-22">
          <view class="pay-item-detail flex-center">
            <view>
              <view class="pay-item-detail-top flex-start">
                <view class="pay-jbi flex-center">
                  <image src="https://images.xxx.com/my_pay_jinbi.png" />
                </view>
                <view class="pay-item-detail-top-money flex-center">80</view>
              </view>
              <view>¥ 80.00</view>
            </view>
          </view>
        </view>

        <view class="pay-item flex-center margin-left-22">
          <view class="pay-item-detail flex-center">
            <view>
              <van-cell-group>
                <van-field type="number" maxlength='6' clearable custom-style="background-color: #F9F9F9;" placeholder="其它金额" input-align="center" bind:change="onChange" />
              </van-cell-group>
            </view>
          </view>
        </view>

      </view>
    </view>
  </view>

2、关键代码.wxss:

复制代码
/* 实现换行 */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.pay .pay-item {
  width: 220rpx;
  height: 140rpx;
  background: #F9F9F9;
  border-radius: 20rpx;
  border: 2rpx solid #E9E9E9;
  margin-top: 20rpx;
}

.pay .pay-item-select{
  width: 220rpx;
  height: 140rpx;
  border:3rpx solid #FF5000;
  border-radius: 20rpx;
  background: #FFF6EE;
  margin-top: 20rpx;
}

.pay .pay-item-detail .pay-input{
  background-color: #F9F9F9;
}

效果:

相关推荐
澄江静如练_10 分钟前
微信小程序发体验版
微信小程序·小程序
流口水的兔子4 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记4 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481216 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero8 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠9 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu19 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域1 天前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域1 天前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序