【扫码体验】仿微信评论列表简约、回复、图片可预览

更新记录

1.1.0（2024-12-06）下载此版本

效果优化

1.0.2（2023-11-08）下载此版本

支持图片预览

1.0.1（2023-11-05）下载此版本

样式优化

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
app-vue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
√	√	√	√	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

支持扫码体验-见右侧二维码

<template>
    <view>
        <comment-list :detail="detail" @reply="reply" @comment="comment"></comment-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                detail: {
                    id: 0,
                    userId: 1,
                    userName: '明月天涯',
                    portrait: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
                    time: '2023年10月30日 14:20',
                    content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
                    imageList: [
                        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg', 
                        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg', 
                        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg', 
                        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg', 
                        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
                        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
                        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
                        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
                        'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg'
                    ],
                    commentList: [{
                        id: 1,
                        userId: 2,
                        userName: '天涯',
                        portrait: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
                        time: '2023年10月30日 14:20',
                        content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
                    }, {
                        id: 2,
                        userId: 3,
                        userName: '明月',
                        toUserName: '天涯',
                        portrait: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
                        time: '2023年10月30日 14:20',
                        content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
                    }]
                }
            };
        },
        methods: {
            comment() {
                console.log('-评论-')
            },
            reply(item) {
                console.log('-回复-', item)
            },
        }
    }
</script>

参数	类型	默认值	描述
detail	Object	{}	评论详情数据
@comment	Function	null	点击评论回调
@reply	Function	null	点击回复回调

【扫码体验】仿微信评论列表简约、回复、图片可预览评论 简约 预览 图片

更新记录

1.1.0（2024-12-06）下载此版本

1.0.2（2023-11-08）下载此版本

1.0.1（2023-11-05）下载此版本

平台兼容性

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

【扫码体验】瀑布流组件、自动计算比例、简单好用

【扫码体验】商品购物车商品规格全选单选自动计算价格

烟花、欢迎庆祝特效支持微信小程序、多种特效可选

【扫码体验】多选、单选标签

商品分类一体页面、支持排序、滚动分页、下拉刷新、侧边栏商品类别【组件】

【扫码体验】仿微信评论列表简约、回复、图片可预览 评论 简约 预览 图片

更新记录

1.1.0（2024-12-06） 下载此版本

1.0.2（2023-11-08） 下载此版本

1.0.1（2023-11-05） 下载此版本

平台兼容性

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

【扫码体验】瀑布流组件、自动计算比例、简单好用

【扫码体验】商品购物车商品规格全选单选自动计算价格

烟花、欢迎庆祝特效支持微信小程序、多种特效可选

【扫码体验】多选、单选标签

商品分类一体页面、支持排序、滚动分页、下拉刷新、侧边栏商品类别【组件】

Modal title

【扫码体验】仿微信评论列表简约、回复、图片可预览评论简约预览图片

1.1.0（2024-12-06）下载此版本

1.0.2（2023-11-08）下载此版本

1.0.1（2023-11-05）下载此版本