微信小程序循环布《源码复制即》

待我称王封你为后i 2021-09-17 00:20 319阅读 0赞

![在这里插入图片描述][20181113171737599.png]  
wxml：

改变图片和循环dorder 的宽可以改变循环的列  
css：

.cover { 
     width:245rpx; 
      height: 298rpx; 
       z-index: -1
       }
    .dorder {  
    width:245rpx;
      height: 298rpx;
        padding: 4rpx;
        }
    .dorders {
      width: 100%;
        margin-top: 20rpx;
          display: flex; 
           flex-wrap: wrap;
           }
    .text {   
    word-break: break-all;
     text-overflow: ellipsis; 
     display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/   -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ 
     -webkit-line-clamp: 1; /** 显示的行数 **/  
     overflow: hidden;  /** 隐藏超出的内容 **/
    font-size: 30rpx;
    text-align: center;
     color: #fff;}
     .bg{ 
      position: absolute;
        width:100%; 
         height: 50rpx; 
          background-color: rgba(0, 0, 0, 0.5); 
           bottom: 10rpx; 
            text-align: center;  
            line-height: 50rpx;
            }
        .top { 
      width: 668rpx;
      height: 80rpx;  
      background: #e2e2e2; 
       display: flex; 
       flex-direction: row; 
       margin-left: 40rpx;
       }
    .topborder {  
    width: 226rpx;
     height: 80rpx;
    line-height: 80rpx; 
    border: 1rpx solid rgb(219, 218, 218);}
    .toptex {  margin-left: 50rpx;
    }
    ._ { 
     width: 100%; 
      height: 10rpx;
        background: #f2f2f2 100%;  
        margin-top: 50rpx;
        }
    .buttontop { 
     background: rgb(187, 3, 3);  
     color: #fff;
     }.
     moremore{ 
      margin-left: 40rpx;
      }

js：

data: {dorder_list: [{   
          text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png', 
             }, {  
          text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png',   
           }, {    
           text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png',   
           }, {   
           text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png', 
             }, {   
           text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png', 
             }, {    
           text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png',   
           }, {    
          text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png',   
           }, { 
           text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png', 
             }, {   
        text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png',  
            }, {   
           text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png',
        }, {   
           text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png',  
            }, {    
            text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png',   
           }, {     
           text: '艾凡企业-企业危机管理',
          dorderimg: '/img/1.png',  
            },
        ],  },

[20181113171737599.png]: /images/20210724/317234eb701d41858e9888de2eb3d19a.png