在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
1、wxml <view class='water-fall'> <view class="item-box" wx:for="{{dataList}}" wx:key="{{index}}"> <text class='tag'>试用测评</text> <image class='pro-img' src="{{item.img}}" mode="widthFix"></image> <view class='two-line-hide-txt'>{{item.prodesc}}</view> <view class='bt-info'> <view class='user-info'> <image class='user-icon' src='{{item.headImg}}'></image> <text class='user-nike'>{{item.nikeName}}</text> </view> <view class='zan-info'> <image class='zan-icon' src='../../../images/psd.png'></image> <text class='zan-num'>{{item.count}}</text> </view> </view> </view> </view> 2、wxss .water-fall{ width: 100%; background: #f5f5f5; padding: 10px; box-sizing: border-box; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;//将页面布局分为两列 column-gap: 10rpx; //设置列之间的间隔 } .item-box{ -moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; //让itembox不被截断 position: relative; font-size: 28rpx; background-color: #fff; border-radius: 10rpx; margin-bottom: 20rpx; vertical-align: top; } .tag{ position: absolute; top: 20px; left: 0; color: #fff; padding: 4px 15px; background: rgba(0, 0, 0, .5); border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .pro-img{ width: 100%; } .two-line-hide-txt{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bt-info{ display: flex; justify-content: space-between; padding: 10px; } .user-info{ } .user-icon{ width: 50rpx; height: 50rpx; border-radius: 50%; border: 1px solid #ddd; vertical-align: middle; } .user-nike{ vertical-align: middle; margin-left: 20rpx; } .zan-info{ } .zan-icon{ width: 40rpx; height: 40rpx; vertical-align: middle; } .zan-num{ vertical-align: middle; margin-left: 20rpx; } 3、js Page({ /** * 页面的初始数据 */ data: { dataList: [ { img: '../../../images/am2.png', prodesc:'一家杜克儿童厨房玩具,满足你的家庭孩子喜欢做菜这急啊经济', headImg: '../../../images/am2.png', nikeName: '哈哈', count: '100' }, { img: '../../../images/am1.png', prodesc: '一家杜克儿童厨房玩具,满足你的家庭孩子喜欢做菜这急啊经济', headImg: '../../../images/am2.png', nikeName: '哈哈', count: '100' }, { img: '../../../images/am3.png', prodesc: '一家杜克儿童厨房玩具,满足你的家庭孩子喜欢做菜这急啊经济', headImg: '../../../images/am2.png', nikeName: '哈哈', count: '100' }, { img: '../../../images/am4.png', prodesc: '一家杜克儿童厨房玩具,满足你的家庭孩子喜欢做菜这急啊经济', headImg: '../../../images/am2.png', nikeName: '哈哈', count: '100' }, { img: '../../../images/am6.png', prodesc: '一家杜克儿童厨房玩具,满足你的家庭孩子喜欢做菜这急啊经济', headImg: '../../../images/am2.png', nikeName: '哈哈', count: '100' }, { img: '../../../images/am10.png', prodesc: '一家杜克儿童厨房玩具,满足你的家庭孩子喜欢做菜这急啊经济', headImg: '../../../images/am2.png', nikeName: '哈哈', count: '100' }, ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, })
|
请发表评论