display: flex多欄多列布局(實例)

我們先來看看效果

其實很簡單,來看看代碼具體怎麼實現的吧

wxml

<!--pages/new/new-exclusive/index.wxml-->
<view class="new-exclusive">
  <!-- 輪播圖 S -->
  <swiper class="viewpager" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" bindchange="changeSwiper">
    <swiper-item wx:for="{{slideshow}}" wx:key="index">
      <image src="{{item.showImg}}" class="image"></image>
    </swiper-item>
  </swiper>
  <!-- <view class="dots">
    <block wx:for="{{slideshow}}" wx:key="index">
      <view class="dot{{index == currentSwiper ? ' active-z' : ''}}"></view>
    </block>
  </view> -->
  <!-- 輪播圖 E -->
  <view class="new-exclusive-desc">
    <view>新人專享超值低價</view>
    <view>活動規則：每個ID限購一件，申請退款的不再享受該優惠</view>
  </view>

  <!-- 寫入內容 S -->
  <view class="goods-list">
    <block wx:for="{{list}}" wx:key="index">
      <view class="goods">
        <image class="cover-img" src="../../../img/shangpin.jpg"></image>
        <view class="goods-title">{{item.title}}</view>
        <view class="goods-price">
          <text>¥</text>
          <text>{{item.price}}</text>
          <text>.</text>
          <text>00</text>
          <text>¥</text>
          <text>{{item.original_price}}</text>
        </view>
      </view>
    </block>
  </view>
  <!-- 寫入內容 E -->
</view>

主要看寫入內容這塊,其他的都是輔助效果

wxss

.new-exclusive {
  background-image: url('http://ico.dongtiyan.com/tu-9.png');
  padding-bottom: 30rpx;
}
/* 輪播圖 */
.viewpager {
  height: 162rpx;
  border-radius: .5rem;
  margin-bottom: 12rpx;
  overflow: hidden;
  margin: 0 30rpx 41rpx;
  padding-top: 23rpx;
}
.viewpager .image {
  width: 100%;
  height: 100%;
  border-radius: .5rem;
}

/*用來包裹所有的小圓點 */
.dots {
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/*未選中時的小圓點樣式 */

.dot {
  width: 7rpx;
  height: 6rpx;
  border-radius: 3rpx;
  margin-right: 26rpx;
  background-color: #BFBFBF;
}

/*選中以後的小圓點樣式 */

.active-z {
  width: 26rpx;
  height: 6rpx;
  border-radius: 3rpx;
  background-color: #EC5E64;
}

.new-exclusive-desc {
  text-align: center;
  color: #FFFFFF
}
.new-exclusive-desc view:nth-child(1) {
  font-size: 32rpx;
  font-weight: bold;
}

.new-exclusive-desc view:nth-child(2) {
  font-size: 20rpx;
  margin-top: 15rpx;
}

/* 商品列表 */

.goods-list {
  display: -webkit-flex;
  background: #FEDCDC;
  border-radius: 20rpx;
  margin: 32rpx 20rpx;
  overflow: hidden;
  padding: 29rpx 20rpx 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: justify;
}
.goods-list::after {
  content: '';
  width: 218rpx;
}
.goods {
  width: 218rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 28rpx;
}
.cover-img {
  width: 100%;
  height: 164rpx;
}

.goods-title {
  margin-top: 18rpx;
  font-size: 20rpx;
  padding: 0 9rpx;
  color: #000000;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goods-price {
  color: #F73A3F;
  padding: 0 9rpx 11rpx;
}

.goods-price text:nth-child(1), .goods-price text:nth-child(3), .goods-price text:nth-child(4) {
  font-size: 16rpx;
}
.goods-price text:nth-child(2) {
  font-size: 24rpx;
}

.goods-price text:nth-child(5) {
  margin-left: 10rpx;
}
.goods-price text:nth-child(5), .goods-price text:nth-child(6) {
  font-size: 12rpx;
  color: #999999;
}
.goods-price text:nth-child(6) {
  text-decoration: line-through;
}

js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    slideshow: [{
        id: 1,
        showImg: "../../../img/slideshow/vivo.jpg"
      },
      {
        id: 2,
        showImg: "../../../img/slideshow/xinchun.jpg"
      }
    ],
    // 輪播數據 + 效果 S
    indicatorDots: true,
    autoplay: true, // 自動播放
    interval: 5000, //輪播時間
    duration: 300, // 滑動速度越大越慢
    circular: true, //是否循環
    beforeColor: "lightgray", //指示點顏色
    afterColor: "white", //當前選中的指示點顏色
    currentSwiper: 0,
    list: [
      {
        title: "商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行",
        price: "520",
        original_price: "1314.00", 
      },
      {
        title: "商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行",
        price: "520",
        original_price: "1314.00",
      },
      {
        title: "商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行商品標題顯示兩行",
        price: "520",
        original_price: "1314.00",
      },
      
    ]
  },
  /**
   * 輪播指示燈
   */
  changeSwiper: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function() {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function() {

  }
})

以上就是所有代碼,很簡單,有什麼不懂的可以加下羣

QQ羣: 1102727334