1，准备子组件–列表

// list.josn
{"component": true
}

// list.js
Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},//接收父组件的参数properties: {list: {            type: Array,      value: []     },},//组件的方法列表methods: {toDetail(e){console.log(e.currentTarget.dataset.index)},}
})

// list.wxml
<!--pages/modal/index.wxml-->
<view class="bd-radius" wx:if='{{list.length>0}}' ><view class='course-list row course-spance' wx:for='{{list}}' wx:for-item='item' wx:key='index' data-index='{{index}}' bindtap="toDetail"><view class="course-img">{{item.img}}</view><view class="course-right column"><view>{{item.title}}</view><view class="text">{{item.tec}}</view><view class="row"><view>{{'￥'+item.price}}</view><view>{{item.num+'人阅读'}}</view></view></view></view>
</view>  

// list.wxss
.bd-radius{border-radius: 20rpx;margin: 20rpx 20rpx 0;background-color: #fff;
}
.course-spance{margin: 0rpx 10rpx;padding: 20rpx 10rpx 40rpx;border-bottom: 1rpx solid #efefef;
}
.row{display: flex;flex-direction: row;justify-content: space-between;
}
.course-img{width: 300rpx;height: 150rpx;background-color: orange;border-radius: 20rpx;
}
.course-right{margin:0 30rpx;flex:1
}
.column{display: flex;flex-direction: column;justify-content: space-around;
}
.text{font-size: 22rpx;color: grey;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;
}

2，使用

// index.josn 引入
{"usingComponents": {"courseList":"/components/list/list"},
}

// index.wxml 使用
<courseList list='{{courseList}}'></courseList>

//index.js  传数据
Page({data: {courseList:[{img:'图一',title:'标题文字一',tec:'玛丽',price:'19.9',num:209},{img:'图二',title:'标题文字二',tec:'沈腾,百亿影帝，真正的实力派，幽默风趣，当年军艺的校草，可是风姿已是往事,牛牛牛牛牛',price:'19.9',num:194},{img:'图三',title:'标题文字三',tec:'艾伦',price:'9.9',num:312},]},})