微信小程序仿QQ用户列表

最新推荐文章于 2025-09-13 09:48:58 发布

原创

最新推荐文章于 2025-09-13 09:48:58 发布 · 4.7k 阅读

收录于

当前文章被以下社区和专栏收录：

该博客展示了如何使用微信小程序开发一个模仿QQ用户列表的功能。通过WXML、JS和WXSS文件的代码示例，详细解释了如何创建分组、折叠展开效果以及展示好友列表。点击分组时，会显示或隐藏对应的好友列表。

微信小程序仿QQ用户列表

效果图如下：

WXML文件代码如下：

<block wx:for="{ {groups}}" wx:key="id" wx:for-index="idxgrp" wx:for-item="groups">

<view class="list-view-groups" id="{ {groups.id}}" bindtap="groupclick">

<view class="list-view-image">

<block wx:if="{ {groups.hidden}}">

<image class="list-image" id="image{ {groups.id}}" src="/../icon/arrow/arrow-right.png"></image>

</block>

<block wx:else>

<image class="list-image" id="image{ {groups.id}}" src="/../icon/arrow/arrow-down.png"></image>

</block>

</view>

<view class="list-view-text">

<text class="list-text" id="name{ {groups.id}}">{ {groups.name}}</text>

</view>

<view class="list-view-count">

<text class="list-text-count" id="count{ {groups.id}}">({ {groups.count}})</text>