1. 程式人生 > >微信小程式迴圈布《原始碼複製即》

微信小程式迴圈布《原始碼複製即》

在這裡插入圖片描述
wxml:

 <view class='dorders'>   
     <block wx:for='{{dorder_list}}' wx:key='item' id='index' class='borderjiaoyu'>
      <view class='dorder'>   
           <view style='position:relative'>   
                  <image src='{{item.dorderimg}}' class='cover' data-item_data='{{item}}' id='vid' bindtap='ontTapk12details'> </image>       
                     <view class='bg'>      
                           <view class='text'>{{item.text}}</view>      
                     </view>      
                  </view>
             </view> 
        </block>  
    </view>

改變圖片和迴圈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',  
        },
    ],  },