158 Star 732 Fork 191

yoby / weui

 / 详情

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

Done
Opened this issue  
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>

Comments (0)

pkkgu created任务
pkkgu set related repository to yoby/weui
pkkgu changed issue state from 待办的 to 已完成
Expand operation logs

Sign in to comment

Status
Assignees
Milestones
Pull Requests
Successfully merging a pull request will close this issue.
Branches
Planed to start   -   Planed to end
-
Top level
Priority
参与者(1)
JavaScript
1
https://git.oschina.net/yoby/weui.git
git@git.oschina.net:yoby/weui.git
yoby
weui
weui

Search