微信小程序仿QQ用户列表

最新推荐文章于 2024-08-26 17:31:40 发布

離歌淺唱半丗殤

最新推荐文章于 2024-08-26 17:31:40 发布

阅读量4.6k

点赞数 5

分类专栏： Mini Program 文章标签：微信小程序

本文链接：https://blog.csdn.net/hugh_Lee/article/details/54645356

版权

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

摘要由CSDN通过智能技术生成

微信小程序仿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">