微信小程式迴圈布《原始碼複製即》
阿新 • • 發佈:2018-11-20
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', }, ], },