登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
开源项目 > WEB应用开发 > WebUI组件/框架 && 微信开发 > 微信开发包 &&
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
178 Star 852 Fork 244

yoby / weui

代码 Issues 1 Pull Requests 1 Wiki 统计 流水线
服务
Issues
 / 详情

做了个聊天窗口，备份一下

已完成
pkkgu
创建于  
2021-01-27 15:01

输入图片说明


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../weui+/css/weui.css"/>
    <link rel="stylesheet" href="../weui+/css/weuix.css"/>

    <script src="../weui+/js/zepto.min.js"></script>
    <script src="../weui+/js/zepto.weui.min.js"></script>
    <script>
	document.onkeyup = function(event) {
		var e = event || window.event || arguments.callee.caller.arguments[0];
		setSendBtn();
	};
	let canSend=false;
	$(function(){
		$('.tab-bottom').on('click','.p-btn',function(){
			if(canSend==false) return;
			$.toast("提示", 500);
		})
		$(".weui-form-input").blur(function(){
			setSendBtn();
		});
		reply(11,'系统','你好工工工工工','','1月27日 11:33',0);
		scrollToBottom();
	})
	function setSendBtn(){
		var pbtn = $(".p-btn");
		if($(".weui-form-input").val().length>0){
			pbtn.css('background','#114F8E').prop('disabled',true);
			canSend=true;
		}else{
			canSend=false;
			pbtn.css('background','#ddd').prop('disabled',false);
		}
	}
	function reply(id,name,msg,img,time,reply){
		var icon = name=='系统'?'icon-40 f-red f11':'icon-120 f-green';
		var img = img==''?'http://weui.shanliwawa.top/favicon.png':img;
		var html='<div class="weui-cells reply'+reply+'" id="reply'+id+'">'+
			'<div class="weui-cell">'+
				'<div class="weui-cell__hd" style="position: relative;">'+
					'<img src="'+img+'" class="" style="width: 50px;display: block">'+
				'</div>'+
				'<div class="weui-cell__bd">'+
					'<p>'+name+' <span class="icon '+icon+'"></span> <font>'+time+'</font></p>'+
					'<div class="message">'+msg+'</div>'+
				'</div>'+
			'</div>'+
		'</div>';
		$(".weui-tab__panel").append(html);
		
		//自己的消息 改变头像位置
		if(reply==1){
			var cell_hd = $("#reply"+id+" .weui-cell__hd");
			var a = cell_hd.prop("outerHTML");
					cell_hd.remove();
			$("#reply"+id+" .weui-cell__bd").after(a);
		}
	}
	function scrollToBottom(){
		var scrollHeight = $('.weui-tab__panel').prop("scrollHeight");
		$('.weui-tab__panel').scrollTo({toT: scrollHeight});
	}
	$.fn.scrollTo =function(options){
        var defaults = {
            toT : 0,    //滚动目标位置
            durTime : 100,  //过渡动画时间
            delay : 30,     //定时器时间
            callback:null   //回调函数
        };
        var opts = $.extend(defaults,options),
            timer = null,
            _this = this,
            curTop = _this.scrollTop(),//滚动条当前的位置
            subTop = opts.toT - curTop,    //滚动条目标位置和当前位置的差值
            index = 0,
            dur = Math.round(opts.durTime / opts.delay),
            smoothScroll = function(t){
                index++;
                var per = Math.round(subTop/dur);
                if(index >= dur){
                    _this.scrollTop(t);
                    window.clearInterval(timer);
                    if(opts.callback && typeof opts.callback == 'function'){
                        opts.callback();
                    }
                    return;
                }else{
                    _this.scrollTop(curTop + index*per);
                }
            };
        timer = window.setInterval(function(){
            smoothScroll(opts.toT);
        }, opts.delay);
        return _this;
    };
    </script>
    <style>
	body,.weui-cells{background-color:#F8F8F8;}
	.weui-cells:before{ border:none;}
	.weui-cells:after{ border:none;}
	.tab-bottom .p-btn {
		height: 29px;
		display: block;
		font-size: 14px;
		color: #fff;
		line-height: 29px;
		text-align: center;
		background-color: #ddd;
		border-radius:3px;
		padding: 2px 2px;
}
	.tab-bottom .weui-grid{ padding:10px;}
	.tab-bottom .weui-grid:before { border:none;}
	.weui-cell__bd p {font-size:12px; line-height:12px;color: #6c757d!important;}
	.weui-cell__bd p font {color: #B9B9B9;}

	.message{
		/*float:left;*/
		/*width: 200px;
		height: 80px;*/
		min-height: 40px;
		font-size: 14px;
		line-height: 30px;
		margin: 15px 40px 0px 0px;
		background-color: #fff;
		border-bottom-color: #fff;
		/*为了给after伪元素自动继承*/
		color: #000;
		padding: 5px 12px 5px 12px;
		box-sizing: border-box;
		border-radius: 6px;
		position: relative;
		word-break: break-all;
	}
	.message:before {
		content: '';
		position: absolute;
		top: 50%;
		left: -5px;
		width: 10px;
		height: 10px;
		margin-top: -10px;
		background: inherit;
		/*自动继承父元素的背景*/
		transform: rotate(45deg);
	}
	.reply1 .message{
		color: #fff;
		margin: 15px 0px 0px 40px;
		background-color: #07C160;
		border-bottom-color: #07C160;
	}
	.reply1 .message:before {left: auto;right: -5px;}
	.reply0 .weui-cell__hd{ margin-right:10px;}
	.reply1 .weui-cell__hd{ margin-left:15px;}
	.reply0 p{ float:left;}
	.reply1 p{ float:right;}
	.weui-tab__panel{ padding:35px 0 60px 0;}
	</style>
</head>

<body ontouchstart>

<div class="weui-header bg-blue" style="position: fixed;top: 0; width: 100%;z-index: 500;"> 
	<div class="weui-header-left"> <a class="icon icon-109 f-white">返回</a> </div>
	<h1 class="weui-header-title">千里冰封</h1>
	<div class="weui-header-right"><a class="icon icon-83 f-white">更多</a></div> 
</div>
<div class="weui-tab__panel">
	<div class="weui-cells reply0">
		<div class="weui-cell">
			<div class="weui-cell__hd" style="position: relative;">
				<img src="http://weui.shanliwawa.top/favicon.png" class="" style="width: 50px;display: block">
			</div>
			<div class="weui-cell__bd">
				<p>联系人名称 <span class="icon icon-120 f-green"></span> <font>1月26日 17:03</font></p>
				<div class="message">大家好，我是小胡<br>个人主页：hlz.space</div>
			</div>
		</div>
	</div>
	<div class="weui-cells reply1">
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<p class="right">联系人名称 <span class="icon icon-120 f-green"></span> <font>1月26日 17:03</font></p>
				<div class="message">大家好，我是小胡</div>
			</div>
			<div class="weui-cell__hd" style="position: relative;">
				<img src="http://weui.shanliwawa.top/favicon.png" style="width: 50px;display: block">
			</div>
		</div>
	</div>
	<div class="weui-cells reply0">
		<div class="weui-cell">
			<div class="weui-cell__hd" style="position: relative;">
				<img src="http://weui.shanliwawa.top/favicon.png" class="" style="width: 50px;display: block">
			</div>
			<div class="weui-cell__bd">
				<p class="left">联系人名称 <span class="icon icon-120 f-green"></span> <font>1月26日 17:03</font></p>
				<div class="message">大家好，我是小胡<br>个人主页：hlz.space</div>
			</div>
		</div>
	</div>
	<div class="weui-cells reply1">
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<p class="right">联系人名称 <span class="icon icon-120 f-green"></span> <font>1月26日 17:03</font></p>
				<div class="message">大家好，我是小胡</div>
			</div>
			<div class="weui-cell__hd" style="position: relative;">
				<img src="http://weui.shanliwawa.top/favicon.png" style="width: 50px;display: block">
			</div>
		</div>
	</div>
	<div class="weui-cells reply0">
		<div class="weui-cell">
			<div class="weui-cell__hd" style="position: relative;">
				<img src="http://weui.shanliwawa.top/favicon.png" class="" style="width: 50px;display: block">
			</div>
			<div class="weui-cell__bd">
				<p class="left">联系人名称 <span class="icon icon-120 f-green"></span> <font>1月26日 17:03</font></p>
				<div class="message">大家好，我是小胡<br>个人主页：hlz.space</div>
			</div>
		</div>
	</div>
	<div class="weui-cells reply1">
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<p class="right">联系人名称 <span class="icon icon-120 f-green"></span> <font>1月26日 17:03</font></p>
				<div class="message">大家好，我是小胡</div>
			</div>
			<div class="weui-cell__hd" style="position: relative;">
				<img src="http://weui.shanliwawa.top/favicon.png" style="width: 50px;display: block">
			</div>
		</div>
	</div>
	<div class="weui-cells reply0">
		<div class="weui-cell">
			<div class="weui-cell__hd" style="position: relative;">
				<img src="http://weui.shanliwawa.top/favicon.png" class="" style="width: 50px;display: block">
			</div>
			<div class="weui-cell__bd">
				<p class="left">联系人名称 <span class="icon icon-120 f-green"></span> <font>1月26日 17:03</font></p>
				<div class="message">大家好，我是小胡<br>个人主页：hlz.space</div>
			</div>
		</div>
	</div>
	<div class="weui-cells reply1">
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<p class="right">联系人名称 <span class="icon icon-120 f-green"></span> <font>1月26日 17:03</font></p>
				<div class="message">大家好，我是小胡</div>
			</div>
			<div class="weui-cell__hd" style="position: relative;">
				<img src="http://weui.shanliwawa.top/favicon.png" style="width: 50px;display: block">
			</div>
		</div>
	</div>
</div>
<div class="weui-grids tab-bottom weui-tabbar">
    <div class="weui-grid" style="width: 18%;">
        <p class="weui-grid__label"><span class="icon icon-14 f30 f-green"></span></p>
    </div>
    <div class="weui-grid" style="width: 62%;">
        <p class="weui-grid__label"><input type="text" class="weui-form-input" style="width: 96%;" /></p>
    </div>
    <div class="weui-grid" style="width: 20%;">
        <p class="weui-grid__label p-btn">发送</p>
    </div>
</div>

</body>
</html>

评论 (0)

头像挂件
pkkgu 创建了任务
头像挂件
pkkgu 将关联仓库设置为yoby/weui
头像挂件
pkkgu 将任务状态从 待办的 修改为已完成
展开全部操作日志

登录 后才可以发表评论

状态
负责人
标签
未设置
标签管理
里程碑
未关联
未关联
Pull Requests
未关联
未关联
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
未关联
分支 (2)
标签 (6)
master
v4.9
v6.0
V5.35
v5.33
5.20
5.14
4.9
开始日期   -   截止日期
-
置顶选项
不置顶
置顶等级：高
置顶等级：中
置顶等级：低
优先级
不指定
严重
主要
次要
不重要
参与者（1）
JavaScript
1
https://gitee.com/yoby/weui.git
git@gitee.com:yoby/weui.git
yoby
weui
weui
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部