vue案例QQ好友列表

最新推荐文章于 2022-08-26 09:46:02 发布

哒哒哒Q

最新推荐文章于 2022-08-26 09:46:02 发布

阅读量1.5k

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/m0_54089303/article/details/121800010

版权

功能如下：滚动条滚动，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 = 0
                this.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>