安装
tnpm install --save @alipay/mas-comment组件介绍
行业小程序comment组件，ETC评论功能抽离。
- 默认渲染data列表中评论属性，亦支持传入渲染方法（作用域插槽renderItem，slot-scope暴露列表的item和index参数）
- 亦支持当作容器使用，传入默认插槽时body部分可自定义渲染
参数说明
| 属性 | 填写要求 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| data | 选填 | Array | 当作容器使用时可不传 | - | - |
| containerClassName | 选填 | String | 容器类名 | - | - |
| autoplay | 选填 | Bool | 自动播放 | ture | true |
| interval | 选填 | Number | 轮播间隔 | 2000 | - |
| circular | 选填 | Bool | 循环 | true | - |
| title | 选填 | String | 标题 | 常见问题 | - |
| loadMoreText | 选填 | String | 加载更多文字，为空时不渲染该区域 | 查看更多问题 | - |
| onLoadMore | 选填 | Function | 点击加载更多触发 | - | |
| onGotoDetail | 选填 | Function | 点击单条 | - | |
| onPreviewImg | 选填 | Function | 点击图片 | - |
在小程序中使用
在 page.json 文件中添加组件依赖
{
"usingComponents": {
"mas-comment": "@alipay/mas-comment/es/index"
}
}调用方式
在 page.axml 中引用组件
<!-- 页面使用方式 -->
<mas-comment data="{{data}}" containerClassName="comment" onGotoDetail="onGotoDetail">
<!-- <view>body</view> -->
<!-- <view slot="renderItem" slot-scope="props">{{props.index}}</view> -->
</mas-comment>在 page.js 中配置mas-comment组件相关属性
Page({
data: {
data: [
{
"id": 1246,
"praiseCount": 0,
"answerContent": "来看看快快乐乐",
"answerTime": '2019-09-03',
"answerImage": [
{
"djangoId": "F1XF4oYkSEyA-UPvxdXe7QAAACMAARED",
"isCover": 0,
"sourceUrl": "http://mmtcdp.stable.alipay.net:443/afts/img/F1XF4oYkSEyA-UPvxdXe7QAAACMAARED/original?bz=mm_other&tid=afts_traceId",
"height": 0,
"width": 0,
"targetUrl": "http://mmtcdp.stable.alipay.net:443/afts/img/F1XF4oYkSEyA-UPvxdXe7QAAACMAARED/original?bz=mm_other&tid=afts_traceId"
}
],
"userId": "2088302651641345",
"scheme": "http://render-dev.site.alipay.net/p/s/lifePages/www/answerDetail.html?enableWK=YES&answerId=QA_A_20190902000031916&SourceId=B459&LinkSource=normal&spmab=a89.b11404&scm=6.matrix.answer.-.-.-.-.BC_TP_20190820000012296.QA_A_20190902000031916.-.B459.-.-.-&TopicId=BC_TP_20190820000012296",
"questionId": "QA_Q_20190806000020395",
"scm": "6.matrix.answer.-.-.-.-.BC_TP_20190820000012296.QA_A_20190902000031916.-.B459.-.-.-",
"userInfoVO": {
"userName": "匿名",
"userId": "2088302651641345",
"userType": 0
},
"answerId": "QA_A_20190902000031916",
"status": 9990
}
]
},
onLoad() { },
onGotoDetail(item){
console.log(item)
}
});样式覆盖推荐方式说明
可以通过设置容器类名containerClassName来增加内部元素的样式优先级，达到样式覆盖的目的例如
.comment{
.mas-comment-title{
}
.mas-comment-body{
}
.mas-comment-more{
}
}Badges
