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

最新推荐文章于 2024-06-11 12:15:54 发布
最新推荐文章于 2024-06-11 12:15:54 发布
阅读量1.4k 收藏 4
点赞数 2
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42543264/article/details/106802812
版权

我们先来看看效果

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

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

青衫折扇
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5弹性布局两行三列,display:flex 多栏多列布局
weixin_33600376的博客
06-09 5067
转自：http://www.360doc.com/content/14/0811/01/2633_400926000.shtmldisplay:flex 多栏多列布局浏览器支持情况：火狐直接支持w3c无前缀写法，谷歌和opera支持-webkit- 前缀写法，比较适合移动端开发使用，display:flex 这个牛逼的css3布局属性，遗憾的是只有谷歌和火狐支持，中国人常用的手机上的浏览器几乎全军...
flex 固定一列_display:flex 多栏多列布局
weixin_28949049的博客
12-24 819
网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Fle...
css flex几种多列布局
12-30
基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; } .middle{ flex:1; background: green; } .right{ flex:1; background: blue; }
css display:flex 3列显示
weixin_42593549的博客
01-10 1031
可以使用 flexbox 布局实现3列显示。 首先，需要将父容器的 display 设置为 flex。然后，可以在父容器中使用 flex-wrap 属性来让容器自动换行，并设置 flex-direction 为 row，表示排列方向为横向。最后，可以使用 flex-basis 属性来设置子元素的宽度。 示例代码： .parent { display: flex; flex-wrap: wr...
如何用css实现两列布局?
最新发布
weixin_45596561的博客
06-11 1322
2.通过给两列都设置float:left属性和宽度就可以实现两列布局，还要设置伪元素清除浮动；通过给容器设置flex布局，然后每一列设置flex:1，就可以实现两列等宽；实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、Flexbox和Grid布局。无论使用哪种布局方式，都要考虑响应式设计，以确保布局在各种设备上都能良好展示。Grid布局是CSS中最强大的布局系统之一，尤其适合复杂的网格布局。就可以实现等宽两列布局，这种是只在容器设置即可。4. 多总结即可，容易忘。
超详细！弹性盒子(display:flex)
weixin_49602426的博客
08-20 1万+
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你弹性盒子可以批量式的改变子元素的布局！那么弹性盒子用在什么地方比较合适呢：1.当一个盒子里的子元素需要垂直居中一个块的内容2.当盒子里所有的子元素占用等量的可用宽度/高度时。
css display:flex 属性
Silence_Sep的博客
03-07 370
转载：https://www.jianshu.com/p/d9373a86b748 一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最...
display:flex 多栏多列布局
09-23 952
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便...
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
display: flex弹性布局
10-12
display: flex弹性布局
display：flex布局语法
11-20
flex 弹性盒子布局语法，关于廖雪峰老师网站学习笔记的分享，
flex布局之多行多列
丁哒哒的博客
05-17 1万+
1、三行三列，边距都是20px，每个box宽高都是200px 使用flex布局，给外层盒子宽高都设置成640px(200*3+20*2)，在使用align-content: space-between和justify-content: space-between即可，代码如下： <style> *{ padding:0; margin: 0; } html,body{ width: 100%; height: 100%; } .box{
移动端flex布局与多列布局
浅陌繁星的博客
12-05 1181
flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
css之dispaly:flex;多行多列
热门推荐
给我一颗橙子
10-02 1万+
最近老是遇到布局问题，尤其是在垂直居中布局上。之前不了解display：flex;最近看了看书，简单的整理了下，于是就产生了这篇文章 flex弹性布局可以简便，完整，响应式的实现各种页面的布局，而且现在也得到了所有浏览器的支持，实在是布局很便利的工具呢。 一、flex布局的基本概念 1.任何一个元素使用display：flex属性后都可以看做一个flex容器；2.它的子元素变成flex容器中
CSS3基础学习（弹性盒子）（八）
qq_36802214的博客
08-19 540
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 属性 描述 display 指定 HTML 元素盒子类型。 flex-direction 指定了弹性容器中子元素的排列方式 justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 align-items
display css 需要注意的地方
Iamgoodgilr的博客
08-29 559
1、几个比较常用的display属性值 display:block/none/flex/inline-block/inline display:block 俩作用：1、把像span 、a等行内元素（一直讨厌这些名称词，只想用占整行和不占整行来表达）   设置为块级元素。     2、对于块级元素设置display:block就是显示作用（display:none隐藏）。 displa
display:flex详解
Anony_me的博客
06-29 1万+
1. 属性指定了弹性子元素在父容器中的位置。2. 内容对齐（）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐3. 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。4. 属性用于指定弹性盒子的子元素换行方式。5. 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。6. 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。（1）flex-direction的值有: ：横向从左到右排
前端提升篇之flex或grid布局实现多列均分布局
哆啦A瑶的博客
05-11 6217
提供一个使用弹性盒布局的多列均分布局终极解决方案，能够实现下图的效果： 其特点有： 列数可控 子元素的宽度相同 列和列之间有空隙，左右两边对齐（没有空隙） 子元素按照从左到右、从上到下的顺序排布 父元素使用flex布局： .container { width: 100%; height: auto; border: solid 1px gray; /* 使用flex布局，设置gap*/ display: flex; flex-wrap: wrap;
display:flex 使用实例
liuyan55的专栏
02-10 4204
display:flex 使用实例   flex的使用实例   1.  flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现 HTML代码： &lt;div class="demo"&gt; &lt;div class="inner"&gt; &lt;p&gt;这是一个测试这是一个测试这是...
除了display: flex;还有什么布局？
01-03
除了display: flex;，还有以下几种常见的布局方式： 1. display: block; - 这是默认的布局方式，元素会以块级元素的形式显示，每个元素会独占一行。 - 例子： ```css .demo { display: block; } ``` 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值