display: flex多栏多列布局(实例)

短命女 2023-02-18 09:49 13阅读 0赞

我们先来看看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

其实很简单,来看看代码具体怎么实现的吧

wxml

<view class="new-exclusive">
      
      <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="new-exclusive-desc">
        <view>新人专享超值低价</view>
        <view>活动规则：每个ID限购一件，申请退款的不再享受该优惠</view>
      </view>
    
      
      <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>
      
    </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;
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200617105600122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70