前端技术实现聊天列表模版-带动画

最新推荐文章于 2023-08-12 15:17:42 发布
最新推荐文章于 2023-08-12 15:17:42 发布
阅读量2k 收藏 6
点赞数
分类专栏： web后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18984151/article/details/89366889
版权

下面是效果图

 

下面是实现代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="frozen.css">
	<meta charset="utf-8">
	<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
	<script type="text/javascript" src="vue.min.js"></script>
  <style type="text/css">
    
    /*从右往左切换动画*/
    .rtol{
      animation:rtolani 0.5s;
      -webkit-animation:rtolani 0.5s; /* Safari and Chrome */
    }
    @keyframes rtolani
    {
      0%   {left:-100%; top:10%;}
      100% {left:0; top:10%;}
    }
    @-webkit-keyframes rtolani /* Safari and Chrome */
    {
      0%   {left:100%; top:10%;}
      100% {left:0; top:10%;}
    }

    /*从右往左切换动画 321返回时无效加的这个*/
    .rrtol{
      animation:rrtolani 0.5s;
      -webkit-animation:rrtolani 0.5s; /* Safari and Chrome */
    }
    @keyframes rrtolani
    {
      0%   {left:-100%; top:10%;}
      100% {left:0; top:10%;}
    }
    @-webkit-keyframes rrtolani /* Safari and Chrome */
    {
      0%   {left:100%; top:10%;}
      100% {left:0; top:10%;}
    }
    

    /*从左往右切换动画*/
    .ltor{
      animation:ltorani 0.5s;
      -webkit-animation:ltorani 0.5s; /* Safari and Chrome */
    }
    @keyframes ltorani
    {
      0%   {left:100%; top:10%;}
      100% {left:0; top:10%;}
    }

    @-webkit-keyframes ltorani /* Safari and Chrome */
    {
      0%   {left:100%; top:10%;}
      100% {left:0; top:10%;}
    }

    /*控制点击产生阴影*/
    .shadow:active{
      background-color: #eeeeee !important;
      border-radius: 5px;


    }

    /*控制点击产生阴影*/
    .shadow{
      background-color: #ffffff !important;

    }





  </style>
</head>
<body>
<div id="app">
	
	<!-- 顶部tabbar -->
	<div class="ui-tab">
    	<ul class="ui-tab-nav ui-border-b" style="position:fixed;z-index: 1000;height: 10%;">
        	<li :class="msglist" @click="msgbtnde"><span>消息列表</span></li><!-- current -->
        	<li :class="myfri" @click="myfribtnde"><span>我的朋友</span></li>
        	<li :class="mymore" @click="mymorbtnde"><span>我的扩展</span></li>
    	</ul>
    	<!-- 占位 -->
    	
	</div>


	  <!-- 消息列表页 -->
    <div v-if="msglist=='current'" style="position:absolute;top:10%;width: 100%" :class="anistyle">
    		<!-- 搜索条 -->
    		<div  class="ui-searchbar-wrap ui-border-b" @click="goToSearch('searchfriend')">
    			<div class="ui-searchbar ui-border-radius">
        			<i class="ui-icon-search"></i>
        			<div class="ui-searchbar-text">在这里搜索朋友</div>
        			<div class="ui-searchbar-input">
        				<input value="" type="tel" placeholder="在这里搜索朋友" autocapitalize="off">
        			</div>
        			<i class="ui-icon-close"></i>
    			</div>
    			<button class="ui-searchbar-cancel">取消</button>
			</div>
			
			<!-- 条目容器 -->
			<ul class="ui-list ui-list-function ui-border-tb">
     			
     			
        	<!-- 消息列表项 -->
     			<li class="shadow" v-for="item in items" @click="goToChat(item)">
        			<!-- 条目头像用户名内容 -->
        			<div class="ui-avatar">
            			<span :style="item.imgsrc"></span>
        			</div>
        			<div class="ui-list-info ui-border-t">
            			<h4 class="ui-nowrap">{{item.username}}</h4>
            			<p>{{item.content}}</p>
        			</div>
        			<!-- 条目右侧时间 -->
    				<div class="ui-btn disabled shadow">{{item.time}}</div>
    				<!-- 条目右侧未读个数 -->
    				<div v-if="item.mesnum>0" style="background-color: #ff0000;
    				width:16px;
    				height:16px;
    				border-radius: 50%;
    				text-align: center;
    				line-height: 16px;
    				font-size: 12px;
    				color: #fff;
    				position: absolute;
    				top: 0;
    				left: 0;
    				">{{item.mesnum}}</div>
    			</li>
			</ul>    		

    </div>


    <!-- 我的朋友页 -->
    <div v-if="myfri=='current'" style="position:absolute;top:10%;width: 100%" :class="anistyle">    	
  		<!-- 搜索条 -->
      <div  class="ui-searchbar-wrap ui-border-b" @click="goToSearch('searchfriend')">
      		<div class="ui-searchbar ui-border-radius">
          		<i class="ui-icon-search"></i>
          		<div class="ui-searchbar-text">在这里搜索朋友</div>
          		<div class="ui-searchbar-input">
          			<input value="" type="tel" placeholder="在这里搜索朋友" autocapitalize="off">
          		</div>
          		<i class="ui-icon-close"></i>
      		</div>
      		<button class="ui-searchbar-cancel">取消</button>
  		</div>
  		<!--两图区域 -->
      <div class="ui-feeds">
        <ul>
          <li>
            <span :style="TopImg[0].src" @click="topImgClicked(TopImg[0].link)"></span>
          </li>
          <li>
            <span :style="TopImg[1].src" @click="topImgClicked(TopImg[1].link)"></span>
          </li>
        </ul>
      </div>
      <!-- 列表选项卡 -->
      <div class="ui-tab ">
        <ul class="ui-tab-nav ui-border-b ">
          <li style="text-align: left;" :class="myfri_fri" @click="myfriFri"><span>朋友列表</span></li>
          <li style="text-align: right;" :class="myfri_gro" @click="myfriGro"><span>群聊列表</span></li>
        </ul>
      </div>
      <!-- 下部列表 -->
      
      <div v-if="myfri_fri=='current'"><!-- 朋友列表容器 -->
        <ul class="ui-list ui-list-single ui-list-link ui-border-tb">
          
          <li class="ui-border-t" v-for="friitem in frilists" @click="goToChat(friitem)">
            <!-- 字母序号区域if条件渲染 -->
            <div class="ui-list-info" v-if="friitem.flag=='order'">
              <h4 class="ui-nowrap" style="margin-left: 3%;color: #666666;">{{friitem.username}}</h4>
              <div class="ui-txt-info"></div>
            </div>
          
            <!-- 朋友项区域if条件渲染 -->
            <div class="ui-avatar-s" v-if="friitem.flag=='user' && trygroupflag(friitem.groupflag)">
              <span :style="friitem.imgsrc"></span>
            </div>
            <div class="ui-list-info ui-border-t shadow" v-if="friitem.flag=='user' && trygroupflag(friitem.groupflag)">
              <h4 class="ui-nowrap">{{friitem.username}}</h4>
            </div>
          </li>
          
        </ul>
      </div>
      <div v-if="myfri_gro=='current'"><!-- 群聊列表容器 -->
        <ul class="ui-list ui-list-single ui-list-link ui-border-tb">
          
          <li class="ui-border-t" v-for="groitem in grolists" @click="goToChat(groitem)">
            <!-- 字母序号区域if条件渲染 -->
            <!-- <div class="ui-list-info" v-if="groitem.flag=='order'">
              <h4 class="ui-nowrap" style="margin-left: 3%;color: #666666;">{{groitem.username}}</h4>
              <div class="ui-txt-info"></div>
            </div> -->
          
            <!-- 群项区域if条件渲染 -->
            <div class="ui-avatar-s" v-if="groitem.flag=='group'">
              <span :style="groitem.imgsrc"></span>
            </div>
            <div class="ui-list-info ui-border-t shadow" v-if="groitem.flag=='group'">
              <h4 class="ui-nowrap">{{groitem.username}}</h4>
            </div>
          </li>
          
        </ul>
      </div>


    </div>




  	<!-- 我的扩展页 -->
    <div v-if="mymore=='current'" style="position:absolute;top:10%;width: 100%" :class="anistyle">    	
  		<div  class="ui-searchbar-wrap ui-border-b" @click="goToSearch('searchresource')">
      		<div class="ui-searchbar ui-border-radius">
          		<i class="ui-icon-search"></i>
          		<div class="ui-searchbar-text">在这里搜索资源</div>
          		<div class="ui-searchbar-input">
          			<input value="" type="tel" placeholder="在这里搜索朋友" autocapitalize="off">
          		</div>
          		<i class="ui-icon-close"></i>
      		</div>
      		<button class="ui-searchbar-cancel">取消</button>
  		</div>
  		敬请期待...
	 </div>


</div>
</body>
</html>
<script>
	new Vue({
  	el: '#app',
  	data: {
      groupflag:'0',
      myfri_fri:'current',//是否选中消息列表我的朋友中的朋友列表
      myfri_gro:'',//是否选中消息列表我的朋友中的群聊列表
      anistyle:'',//切换动画样式类
      msglist:'current',//是否选中消息列表
		  myfri:'',//是否选中消息列表我的朋友
		  mymore:'',//是否选中消息列表我的扩展
      msglistTop:0,//消息列表滚动值(距页面顶端高度)
      myfriTop:0,//我的朋友滚动值(距页面顶端高度)
      mymoreTop:0,//我的扩展滚动值(距页面顶端高度)
  		TopImg:[
        {
        src:"border-radius: 5%;background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555324144&di=430a23b81be40e36546a7a13f62d87a2&imgtype=jpg&er=1&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F1802%2F78-1P209141R8.jpg)",
        link:"http://www.fanze.online",
        },
        {
        src:"border-radius: 5%;background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555324144&di=430a23b81be40e36546a7a13f62d87a2&imgtype=jpg&er=1&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F1802%2F78-1P209141R8.jpg)",
        link:"http://fanze.online",
        }
      ],

      //朋友列表
      frilists:[
        {
        username: '分组1',
        imgsrc:"",
        uid:'',
        flag:'order',
        groupflag:'1'
        },
        {
        username: '开发者',
        imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180213/20180213062640_77463.jpg)",
        uid:'00001',
        flag:'user',
        groupflag:'1'
        },
        {
        username: '小张',
        imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180213/20180213062640_77463.jpg)",
        uid:'00002',
        flag:'user',
        groupflag:'1'
        },
        {
        username: '咪咪',
        imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180213/20180213062640_77463.jpg)",
        uid:'00003',
        flag:'user',
        groupflag:'1'
        },
        {
        username: '王老三',
        imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180213/20180213062640_77463.jpg)",
        uid:'00001',
        flag:'user',
        groupflag:'1'
        },
        {
        username: '分组2',
        imgsrc:"",
        uid:'',
        flag:'order',
        groupflag:'2'
        },
        {
        username: '张',
        imgsrc:"background-image:url(http://img2.imgtn.bdimg.com/it/u=2060761043,284284863&fm=26&gp=0.jpg)",
        uid:'00001',
        flag:'user',
        groupflag:'2'
        },
        {
        username: '赵',
        imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180213/20180213062640_77463.jpg)",
        uid:'00001',
        flag:'user',
        groupflag:'2'
        }
      ],
      //群聊列表
      grolists:[
        {
        username: 'XX即时通讯官方群',
        imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180213/20180213062640_77463.jpg)",
        uid:'00002',
        flag:'group'
        }
      ],


      //消息列表
      items:[
  			{
  			username: '开发者',
  			content:'晚上哪里吃?',
  			imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180213/20180213062640_77463.jpg)",
  			uid:'00001',
  			time:'晚上20:07',
  			mesnum:0
  			},
  			{
  			username: '小美',
  			content:'你的衣服好漂亮啊!',
  			imgsrc:"background-image:url(http://img2.imgtn.bdimg.com/it/u=2060761043,284284863&fm=26&gp=0.jpg)",
  			uid:'00002',
  			time:'晚上21:40',
  			mesnum:5
  			},
  			{
  			username: '年华',
  			content:'移动端怎么样了?',
  			imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180419/20180419051254_75804.jpg)",
  			uid:'00003',
  			time:'晚上20:30',
  			mesnum:0
  			},
  			{
  			username: '哥哥',
  			content:'在',
  			imgsrc:"background-image:url(http://placeholder.qiniudn.com/100x100)",
  			uid:'00004',
  			time:'晚上21:47',
  			mesnum:10
  			},
  			{
  			username: '开发者',
  			content:'晚上哪里吃?',
  			imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180213/20180213062640_77463.jpg)",
  			uid:'00001',
  			time:'晚上21:47',
  			mesnum:0
  			},
  			{
  			username: '小美',
  			content:'你的衣服好漂亮啊!',
  			imgsrc:"background-image:url(http://img2.imgtn.bdimg.com/it/u=2060761043,284284863&fm=26&gp=0.jpg)",
  			uid:'00002',
  			time:'晚上21:47',
  			mesnum:0
  			},
  			{
  			username: '年华',
  			content:'移动端怎么样了?',
  			imgsrc:"background-image:url(http://placeholder.qiniudn.com/100x100)",
  			uid:'00003',
  			time:'晚上21:47',
  			mesnum:0
  			},
  			{
  			username: '哥哥',
  			content:'在',
  			imgsrc:"background-image:url(http://placeholder.qiniudn.com/100x100)",
  			uid:'00004',
  			time:'晚上21:47',
  			mesnum:0
  			},
  			{
  			username: '开发者',
  			content:'晚上哪里吃?',
  			imgsrc:"background-image:url(http://img.52z.com/upload/news/image/20180213/20180213062640_77463.jpg)",
  			uid:'00001',
  			time:'晚上21:47',
  			mesnum:0
  			},
  			{
  			username: '小美',
  			content:'你的衣服好漂亮啊!',
  			imgsrc:"background-image:url(http://img2.imgtn.bdimg.com/it/u=2060761043,284284863&fm=26&gp=0.jpg)",
  			uid:'00002',
  			time:'晚上21:47',
  			mesnum:0
  			},
  			{
  			username: '年华',
  			content:'移动端怎么样了?',
  			imgsrc:"background-image:url(http://placeholder.qiniudn.com/100x100)",
  			uid:'00003',
  			time:'晚上21:47',
  			mesnum:1
  			},
  			{
  			username: '哥哥',
  			content:'在',
  			imgsrc:"background-image:url(http://placeholder.qiniudn.com/100x100)",
  			uid:'00004',
  			time:'晚上21:47',
  			mesnum:0
  			}
  		] 
  	},
  	methods: {
     	trygroupflag:function(groupflag){

     		if(this.groupflag.search(groupflag)!=-1)
     			return true;
     		else
     			return false;
     	},

     	//tabbar消息列表被点击
     	msgbtnde: function() {
        if(!(this.msglist=='current'))
          this.anistyle='rrtol';
        this.msglist='current';
			  this.myfri='null';
			  this.mymore='null';
        document.documentElement.scrollTop=0;
        document.body.scrollTop=0;
     	},
     	//tabbar我的朋友被点击
     	myfribtnde: function() {
        //判断切换前页
        if(this.msglist=='current')
          this.anistyle='ltor';
        if(this.mymore=='current')
          this.anistyle='rtol';
        
        this.msglist='null';
			  this.myfri='current';
			  this.mymore='null';
        document.documentElement.scrollTop=0;
        document.body.scrollTop=0;
     	},
     	//tabbar我的扩展被点击
     	mymorbtnde: function() {
        this.msglist='null';
			  this.myfri='null';
			  this.mymore='current';
        this.anistyle='ltor';
        document.documentElement.scrollTop=0;
        document.body.scrollTop=0;
     	},
      //我的朋友页中的朋友列表被点击
      myfriFri:function() {
        this.myfri_fri='current';
        this.myfri_gro='';
      },
      //我的朋友页中的群聊列表被点击
      myfriGro:function() {
        this.myfri_fri='';
        this.myfri_gro='current';
      },
      下面是指向安卓的方法
      //消息列表朋友列表(朋友&群聊)条目被点击跳转到聊天窗口--传入后由java解析
      goToChat:function(item) {
        
      	//处理分组展开逻辑
        if(item.flag=='order')
        {
        	if(this.groupflag.search(item.groupflag)!=-1)
        	{
        		this.groupflag=this.groupflag.replace(item.groupflag,'');
        	}       		
        	else if(this.groupflag.search(item.groupflag)==-1)
        	{
        		this.groupflag += item.groupflag;
        	}
        }else         
        	android.gochat(JSON.stringify(item));
      },
      //搜索框被点击
      goToSearch:function(searchfalg) {
        android.gosearch(searchfalg);
      },
      //我的朋友页顶部图片被点击
      topImgClicked:function(link) {
        console.log(link);
        android.gosearch(link);
      },
  	}
})

</script>

 声明:转载请注明出处,本人入门级菜鸟,内容大多学习于网络,存在问题太多不一一列举,大佬多多指教.本人QQ941131649

Ahacker_l
关注
专栏目录
一个简单漂亮的前端聊天界面
个人博客
06-04 2万+
一个简单的前端静态聊天界面，实现了聊天的基本功能，目前后台还没做，接下来还会继续更新后台和完善前台样式并更新。 一.Html代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;chat&lt;/tit
移动端页面聊天静态模板
01-27
无框架，纯html5写的移动端web页面模板，可对接融云的JS API实现聊天功能
uniapp仿微信--聊天界面模板
weixin_45969142的博客
01-09 8125
项目演示 前言 我是看B站的视频一个一个敲的，讲的还不错。可以去看看vue+node.js即时通讯聊天室APP开发前端篇 主界面 chat.vue <template> <!-- 聊天界面展示https://www.bilibili.com/video/BV1hT4y1P75N?p=22 搭建1和2 --> <view class="content"> <!-- 聊天内容 --> <scroll-view class="chat" sc
uni-app聊天页面
04-04
【uni-app聊天页面】是一个基于uni-app框架开发的聊天界面模板，它旨在为开发者提供一个类似于微信聊天体验的用户界面，适用于多种平台，包括iOS、Android以及H5等。uni-app是一个多端开发框架，由DCloud（即海螺...
前端聊天机器人
07-19
本文将深入探讨前端聊天机器人的设计原理、实现技术和相关知识点。 一、聊天机器人概述 聊天机器人基于自然语言处理（NLP）和人工智能（AI）技术，能够理解并回应用户的输入，为用户提供无缝的对话体验。它们通常由...
前端网站HTML5页面模版
最新发布
04-02
【前端网站HTML5页面模版】是现代网页设计的基础，尤其在互联网技术日新月异的今天，HTML5已经成为了构建交互式、响应式和高性能网站的首选标准。本资源包含一组HTML5页面模版，旨在帮助开发者快速构建美观且功能...
聊天机器人登陆页面的自由引导模板- imondal007/ GoGo
01-27
【标题】"聊天机器人登陆页面的自由引导模板- imondal007/ GoGo" 涉及的核心知识点是创建一个专为聊天机器人设计的登录页面，利用Bootstrap这一流行的前端框架来实现。Bootstrap是一个开源的HTML、CSS和JS框架，它...
网站模板-工业企业网站(动画).rar.rar
09-29
总的来说，“网站模板-工业企业网站(动画).rar.rar”提供了一个综合性的解决方案，包括前端设计和可能的后台系统，帮助工业企业快速搭建符合自身特色的官方网站。解压并使用这个模板时，需要根据企业的具体需求进行...
html5 web微信聊天窗口界面模板
12-19
html5 web微信聊天窗口界面模板,html5 web微信聊天窗口界面模板,html5 web微信聊天窗口界面模板,html5 web微信聊天窗口界面模板
基于html5+css3实现的精美聊天界面demo
07-27
基于HTML5+css3实现的两人即时通讯聊天界面，界面风格相当漂亮，可直接使用，也可简单修改为自己想要的样式，仅供大家参考。
IM UI 聊天交流UI设计参考模板 html5
07-04
基于html5的IM UI 聊天交流UI设计参考模板 。我就是参考这个做的在线交流。相当不错
webSocket实时聊天模板+回复功能源码
12-14
这是一款非常好用的websocket实时聊天功能模板，能点击回复和表情回复的功能，具有双向聊天性
html在线聊天窗口
01-30
html在线聊天窗口,只是窗口哦,没有jsp，画面而已
KIM即时通讯UI解决方案（前端聊天界面库）
夏增明的博客
12-26 1138
LuckIM是基于前端技术开发的即时通讯UI解决方案（前端聊天界面库） http://luckim.itsub.cn/dist/index.html 1. 功能展示 主界面展示 可以发送文件 发送图片，调整窗口大小，消息缓存，消息提示音，群组，会话列表， 2.获取授权 标准版：198元（获得压缩版代码，可以通过API文档实现标准化功能） 专业版：298元（提供未压缩的源码，便于二次开发） 3. 联系方式 作者办公QQ：1500506007 作者办公微信：1731..
前端百科---Web聊天排版
u013390913的专栏
12-24 1292
当页面需要进行展示对话聊天信息时,好的布局会让人赏心悦目.下面直接看demo: Document html, body, div, img, span { padding: 0; margin: 0; } .clearfix { display: block; zoom: 1; overflow: hidden; } #container { height: 600px
android,Compose,消息列表和动画（点击item的时候，就会删除）
weixin_43228946的博客
08-12 925
Compose,消息列表和动画（点击item的时候，就会删除）
Vue实现流畅滚动过渡动画：列表元素动画与技术应用
本文主要介绍了如何在Vue项目中实现列表滚动的过渡动画，以提升用户体验。作者通过实例展示了如何利用Vue、better-scroll库进行滚动管理，以及create-keyframe-animation进行动画控制。以下是详细的实现步骤和涉及的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值