字节前端机试题

写在前面：只是把题目共享出来供大家学习参考…

一、原型图二、功能说明

1. 基本功能
   a. 如上方图所示, 完成评论列表的渲染，需要显示 用户头像、用户昵称、评论内容、评论时间、点赞等。
   b. 回复列表默认只显示3条，更多的回复信息会隐藏起来，在评论右侧时间下方显示“展开更多”，点击“展开更多”，显示评论对应的回复列表信息
   c. 评论列表，初始时展示10条评论，滚动到页面底部，继续请求API http://douyin.bytedance.com/api/comment/list 拉取更多数据
2. 加分点（请务必在实现基础功能的前提后再去实现加分功能）
   a. 滚动到底部，拉取数据的过程中给出loading 展示
   b. 如果 http://douyin.bytedance.com/api/comment/list 的接口请求失败(返回的status 有5%的概率不为0)，需要做错误处理，弹toast提示“评论列表获取失败请稍后重试”，2秒后toast消失，注意toast 提示的弹入和淡出的过渡效果
   c. 对于返回的昵称，如果存在超长字符串，需要限制在最长150px内能够展示完毕，多余字符需要…处理，hover上去显示全名昵称

三、数据格式与接口定义说明
评论列表 http://douyin.bytedance.com/api/comment/list

{
    // status 有95%概率返回0表示请求成功，1表示请求失败需要弹窗提示哦
    'status': () => Math.random() >= 0.05 ? 0 : 1,
    // has_more 有95%概率返回1表示还有更多数据，可以继续下拉页面获取更多，0表示没有更多数据了
    'has_more': () => Math.random() >= 0.05 ? 1 : 0,
    'comments': [
    {
        'comment_id': '7687409156096', // 评论id
        'nickname': '猫咪森林123123123123123123123', // 昵称，可能会返回一个超长的字符串，注意截断
        'avatar': 'https://p0.pstatp.com/origin/3795/3033762272', // 用户头像，可能会返回一个裂图，需要你自己做图片裂图的兜底
        'text': '这是什么神仙颜值', // 评论
        'digg_num': 30, // 点赞数
        'is_author': () => Math.random() >= 0.3 ? 0 : 1, // 是不是作者本人，0表示不是，1表示是，如果是作者本人需要显示对于的tag标签
        'date': '2021-06-15T17:45:05.301Z' // 0时区时间戳，需要你渲染成 几分钟前，几小时前，几天前，几月前
        'sub_comment': [ // 回复评论列表，跟评论结构类似，样式上可复用
            {
                'comment_id': '7687409156096', // 评论id
                // 这里不需要渲染谁回复的谁
                'nickname': '猫咪森林123123123123123123123', // 昵称，可能会返回一个超长的字符串，注意截断
                'avatar': 'https://p0.pstatp.com/origin/3795/3033762272', // 用户头像，可能会返回一个裂图，需要你自己做图片裂图的兜底
                'text': '这是什么神仙颜值', // 评论
                'digg_num': 30, // 点赞数
                'is_author': () => Math.random() >= 0.3 ? 0 : 1, // 是不是作者本人，0表示不是，1表示是，如果是作者本人需要显示对于的tag标签
                'date': '2021-06-15T17:45:05.301Z' // 0时区时间戳，需要你渲染成 几分钟前，几小时前，几天前，几月前
            }
        ]
    }
],
}

下面是机试成果截图