微信小程序封装组件--列表

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
      },
    ]
  },
 })