在Discuz模板中调用多用户头像的正确实现方式如下(请特别注意循环结构和数据源的完整性):
1. 数据层处理(source/module/xxx/xxx.php):
确保已获取点赞用户的UID数组,数据结构示例:
- $like_uids = array(123, 456, 789); // 实际应从数据库读取
- $this->assign('like_uids', $like_uids);
复制代码
2. 模板层循环(template/xxx/xxx.htm):
- <div class="liked_users">
- <!--{loop $like_uids $uid}-->
- <span class="avatar_wrap">
- <!--{avatar($uid, 'small', true, 'avatar')}-->
- <!--{if !empty($_G['cache']['users'][$uid])}-->
- <span class="username">{$_G['cache']['users'][$uid]['username']}</span>
- <!--{/if}-->
- </span>
- <!--{/loop}-->
- </div>
复制代码
3. 必须添加的CSS样式(common.css):
- .liked_users {overflow: hidden;}
- .avatar_wrap {
- float: left;
- margin-right: 8px;
- position: relative;
- transition: transform 0.3s;
- }
- .avatar_wrap:hover {
- transform: translateY(-3px);
- z-index: 2;
- }
- .avatar_wrap img {
- border-radius: 50%;
- border: 2px solid #fff;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
- }
复制代码
4. 高级特性增强:
- 鼠标悬停展示用户名片:
- // source/plugin/your_plugin/template/xxx.js
- $('.avatar_wrap').hover(function(){
- DISCUZ.getUserCard($(this).find('img').attr('uid'), this);
- });
复制代码
- 异步加载优化:
- // 当用户量较大时采用分批加载
- $this->assign('load_type', count($like_uids) > 50 ? 'ajax' : 'static');
复制代码
关键注意事项:
1. 必须确保$like_uids是经过array_unique处理的非空数组
2. 当使用第三方头像服务时,需在后台开启远程头像功能
3. 头像缓存机制:Discuz默认会对头像URL进行CDN处理,如需强制更新需调用`getavatar($uid, 'small', 1)`参数
如果需要实现类似微博的横向滑动效果,可添加以下扩展代码:
- .liked_users {
- display: flex;
- overflow-x: auto;
- padding: 10px 0;
- -webkit-overflow-scrolling: touch;
- }
- .liked_users::-webkit-scrollbar {
- height: 4px;
- }
复制代码
遇到数据不显示的情况,请按以下步骤排查:
1. 检查PHP错误日志是否有SQL查询错误
2. 在模板中添加`<!--{debug}-->`输出原始数据
3. 确认用户组权限是否允许查看目标用户信息
4. 检查uc_server通信是否正常(影响跨应用头像显示)
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。 |