vue案例QQ好友列表

功能如下：滚动条滚动，qq好友在线和不在线的区分，点击分组名展开列表，再点则合并，列表展开合并时具有简单的动画效果。

通过axios发送请求拿到数据，利用自定义属性进行传值给子组件，使用transition标签实现动画。具体代码如下：

css代码：

        *{margin: 0;padding: 0;}#app{width: 300px;height: 500px;margin: 20px auto;overflow-y: scroll;border: 1px solid rgb(226, 219, 219);background-color: rgba(104, 187, 104,0.5);}h1{text-align: center;}h2{display: flex;justify-content: space-between;padding: 10px 20px;background-color: lightgray;}ul{list-style: none;overflow: hidden;}li{border-bottom: 1px solid rgb(207, 196, 196);margin: 10px;}img{width: 40px;height: 40px;border-radius: 50%;float: left;margin-right: 10px;}p{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.fade-enter,.fade-leave-to{max-height:0;}.fade-enter-active,.fade-leave-active{transition: all 1s;}.fade-enter-to,.fade-leave{max-height: 600px;}.rotate{transform: rotate(90deg);}span{transition: 0.5s;}.bu{filter: grayscale(100%);color: gray;}</style>

html和js代码：

<body><div id="app"><h1>好友列表</h1><group v-for="(item,i) in groups" :group-item="item" :key="i"></group></div></body>
<script src="../vue.js"></script>
<script src="../axios.js"></script>
<script type="text/html" id="s1"><div><h2 @click="open=!open"><span :class="open?'rotate':''">></span><span >{{groupItem.groupName}}</span><span>{{onlines}}/{{groupItem.list.length}}</span></h2><!-- 好友界面 --><transition name="fade"><ul v-show="open"><li v-for="(f,i) in newList" :class="f.online?'zai':'bu'"><img :src="f.src" alt=""><h3 v-text="f.name"></h3><p>{{f.sign}}</p></li></ul></transition></div></script>
<script>Vue.component("group", {template:"#s1",data(){return{open:false }},props:["groupItem"],computed:{onlines(){let count = 0this.groupItem.list.forEach(element=>{if (element.online) {count++}})return count},newList(){let arr = []this.groupItem.list.forEach(e=>{if (e.online) {arr.unshift(e)}else{arr.push(e)}})return arr}},})var app = new Vue({el:"#app",data:{groups:[]},created() {axios.get("./friendsData.json").then(res=>{this.groups = res.data})},})
</script>

vue案例QQ好友列表相关推荐

C# 高仿腾讯QQ (实现QQ好友列表-基于ListBox的绘法)
C#实现QQ好友列表,一直是我网上百搜却不得其解的控件,几乎找不到相关的信息,而找到的也不是我想要的那种.不过,曾在CSDN上看过到过网上一位大牛用C++实现QQ好友列表这种效果,当然,对于我这个C+ ...
TableView实现QQ好友列表效果
概述:本文是黑马程序员UI视频教程第九天,QQ好友列表案例的总结该案例中主要涉及的知识点有:改变图片在UIButton中的平铺方式.UITableViewHeaderFooterView.设置按钮中 ...
js解密之QQ的bkn值，获取QQ群成员信息，获取QQ好友列表信息
js解密之QQ的bkn值,获取QQ群成员信息,获取QQ好友列表信息 Lan 2020-05-31 12:13 126 人阅读 0 条评论 QQ群网站:https://qun.qq.com ...
iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）
iOS开发UI篇-使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...
iOS之仿QQ好友列表展开收缩效果的实现
使用UICollectionView实现思路很明显整体它是一个列表,它的分组是一个列表,它里面的好友列表也是一个列表,所以就可以使用组头来设置分组列表,使用cell设置好友列表: 当点击组头的时候 ...
tableView练习 -- QQ好友列表
LWTViewController.h // // LWTViewController.h // tableView练习 -- QQ好友列表 // // Created by apple on 14- ...
html仿qq最小化怎么实现,JS仿QQ好友列表展开、收缩功能(第一篇)
JS仿QQ好友列表展开.收缩功能(第一篇) 发布时间:2020-10-17 14:20:03 来源:脚本之家阅读:96 作者:erdouzhang 效果图如下所示: html: 我的好友张三李四 ...
Android开发学习之QQ好友列表的实现
今天想和大家分享的是QQ好友列表的实现,我们知道,在默认情况下,QQ好友列表是处于收缩状态的,此时,列表显示好友分组名称.当我们单击分组时,列表处于展开状态,列表显示该分组下的项目.当再次单击分组时, ...
python获取qq好友ip_使用Python模拟登录QQ邮箱获取QQ好友列表
最近因开发项目的需要,有一个需求,就是很多SNS网站都有的通过 Email地址导入好友列表,不过这次要导入的不是Email 列表,而是QQ的好友列表. 实现方式: 通过google一搜,实现的方式大 ...

vue案例QQ好友列表

vue案例QQ好友列表相关推荐

最新文章

热门文章