效果圖：
注意網絡請求
wxml:
<view class='center'>
<block wx:for-items="{{courseList}}">
<view class='item'>
<view class='item_left'>
<image class='item_left_img' src='{{item.picSmall}}'></image>
</view>
<view class='item_right'>
<view class='item_right_top'>{{item.description}}</view>
<view class='item_right_bottom'>{{item.name}}</view>
</view>
</view>
<view class='item_line'></view>
</block>
</view>
wxss:
/* 頂部 */
.top{
width: 100%;
height: 200rpx;
background: #000;
}
/* 中間列表 */
.center{
margin-top: 20rpx;
}
.item{
padding: 10rpx;
height: 200rpx;
display: flex;
flex-direction: row;
/* 設置方向水平方向 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool */
}
.item_left{
width: 30%;
height: 100%;
}
.item_left_img{
width: 100%;
height: 100%;
}
.item_right{
width: 70%;
margin-left: 10rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item_right_top{
/* 佔兩行 */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.item_right_bottom{
/* 佔一行 */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.item_line{
/* item的線 */
height: 2rpx;
background: #f5f5f5;
}
js:
Page({
/**
* 頁面的初始數據
*/
data: {
page:10,
courseList:[]
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
this.initList();
},
// 初始化列表
initList:function(){
var that =this;
wx.request({
url: 'http://www.imooc.com/api/teacher',
data: {
type: '4',
num: this.data.page
},
header: {
'content-type': 'application/json' // 默認值
},
success(res) {
that.setData({
courseList:that.data.courseList.concat(res.data.data)
})
}
})
},