手機下拉刷新
cssjavascript
speaking.csscss
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: none;
}html
html {
font-size: 10px;
}java
body {
background-color: #E6E6E6;
font-size: 1.2em;
}
/*主體內容*/
.content {
padding-bottom: 71px;
background-color: #E6E6E6;
}
.content li {
width: 100%;
list-style: none;
}web
.content li>div {
padding: 5px;
}ajax
.content li>div:after {
content: "";
clear: both;
height: 0;
visibility: hidden;
display: block;
}json
/*說話的內容*/
.speakContent{
width: 80%;
padding: 5px 0px;
min-height: 30px;
display: block;
float: left;
margin-right: 5%;
}
.speakContent>div{
border-radius: 5px;
padding: 5px;
}app
.imgset {
width: 10%;
height: 30px;
display: block;
}dom
.notI>.imgset {
float: left;
margin-right: 5px;
}測試
.notI>.fa {
float: left;
padding-top: 8px;
color: #FFFFFF;
}
.ispeak>.fa {
float: right;
padding-top: 8px;
color: #BCED50;
}
.ispeak>.imgset {
margin-right: 5px;
float: right;
}
.notI>.speakContent>div {
float: left;
background-color: #FFFFFF;
}
.ispeak>.speakContent {
float: right;
margin-right: 0;
margin-left: 5%;
}
.ispeak>.speakContent>div {
float: right;
background-color: #BCED50;
}
.opacity {
-webkit-animation: opacity 0.3s linear;
animation: opacity 0.3s linear;
}
@-webkit-keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*輸入框位置*/
.footer {
position: fixed;
left: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 71px;
}
.sendContent{
padding: 5px;
resize: none;
border: 0;
width: 75%;
height: 60px;
font-size: 16px;
border-bottom: 1px solid #00DB00;
overflow-x:hidden ;
overflow-y: auto;
margin-left: 5px;
}
.weui_btn.weui_btn_mini.sub{
width: 20%;
height: 71px;
line-height: 71px;
position: absolute;
right: 0;
/*bottom: 15px;*/
}
dropload.css
.dropload-up,.dropload-down{
position: relative;
height: 0;
overflow: hidden;
font-size: 12px;
/* 開啓硬件加速 */
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
.dropload-down{
height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
height: 50px;
line-height: 50px;
text-align: center;
}
.dropload-load .loading{
display: inline-block;
height: 15px;
width: 15px;
border-radius: 100%;
margin: 6px;
border: 2px solid #666;
border-bottom-color: transparent;
vertical-align: middle;
-webkit-animation: rotate 0.75s linear infinite;
animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
html
<!doctype html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<title>聊天</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=yes" />
<link rel="stylesheet" type="text/css" href="http://cdn.weixiaojia.cn/pulg/weui/weui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.weixiaojia.cn/mobile/css/expand/weiui_expand.css" />
<link rel="stylesheet" href="../../css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/find/dropload.css" />
<link rel="stylesheet" type="text/css" href="../../css/find/speaking.css"/>
<link rel="stylesheet" href="../../css/find/dropload.css">
</head>
<body>
<div class="content">
<div class="lists sended">
<li>
<div class="notI">
<img class="imgset" src="../../images/class_record/233058.jpg">
<i class="fa fa-caret-left"></i>
<div class="speakContent">
<div>111111111111111</div>
</div>
</div>
</li>
<li>
<div class="ispeak">
<img class="imgset" src="../../images/class_record/215135.jpg">
<i class="fa fa-caret-right"></i>
<div class="speakContent">
<div>有一種相見還埋藏在心中</div>
</div>
</div>
</li>
<li>
<div class="notI">
<img class="imgset" src="../../images/class_record/233058.jpg">
<i class="fa fa-caret-left"></i>
<div class="speakContent">
<div>111111111111111</div>
</div>
</div>
</li>
<li>
<div class="ispeak">
<img class="imgset" src="../../images/class_record/215135.jpg">
<i class="fa fa-caret-right"></i>
<div class="speakContent">
<div>有一種相見還埋藏在心中</div>
</div>
</div>
</li>
<li>
<div class="notI">
<img class="imgset" src="../../images/class_record/233058.jpg">
<i class="fa fa-caret-left"></i>
<div class="speakContent">
<div>111111111111111</div>
</div>
</div>
</li>
<li>
<div class="ispeak">
<img class="imgset" src="../../images/class_record/215135.jpg">
<i class="fa fa-caret-right"></i>
<div class="speakContent">
<div>有一種相見還埋藏在心中</div>
</div>
</div>
</li>
<li>
<div class="notI">
<img class="imgset" src="../../images/class_record/233058.jpg">
<i class="fa fa-caret-left"></i>
<div class="speakContent">
<div>111111111111111</div>
</div>
</div>
</li>
<li>
<div class="ispeak">
<img class="imgset" src="../../images/class_record/215135.jpg">
<i class="fa fa-caret-right"></i>
<div class="speakContent">
<div>有一種相見還埋藏在心中</div>
</div>
</div>
</li>
<li>
<div class="notI">
<img class="imgset" src="../../images/class_record/233058.jpg">
<i class="fa fa-caret-left"></i>
<div class="speakContent">
<div>111111111111111</div>
</div>
</div>
</li>
<li>
<div class="ispeak">
<img class="imgset" src="../../images/class_record/215135.jpg">
<i class="fa fa-caret-right"></i>
<div class="speakContent">
<div>有一種相見還埋藏在心中</div>
</div>
</div>
</li>
<li>
<div class="notI">
<img class="imgset" src="../../images/class_record/233058.jpg">
<i class="fa fa-caret-left"></i>
<div class="speakContent">
<div>111111111111111</div>
</div>
</div>
</li>
<li>
<div class="ispeak">
<img class="imgset" src="../../images/class_record/215135.jpg">
<i class="fa fa-caret-right"></i>
<div class="speakContent">
<div>有一種相見還埋藏在心中</div>
</div>
</div>
</li>
</div>
</div>
<div class="footer">
<textarea class="sendContent"></textarea>
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary sub">發送</a>
</div>
<!-- jQuery1.7以上 或者 Zepto 二選一，不要同時都引用 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script src="../../js/find/dropload.min.js"></script>
<script>
$(function() {
// 頁數
var page = 0;
// 每頁展現10個
var size = 2;
// dropload
$('.content').dropload({
scrollArea: window,
domUp: {
domClass: 'dropload-up',
domRefresh: '<div class="dropload-refresh">↓下拉刷新-自定義內容</div>',
domUpdate: '<div class="dropload-update">↑釋放更新-自定義內容</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加載中-自定義內容...</div>'
},
loadUpFn: function(me) {
$.ajax({
type: 'GET',
url: 'json/update.json',
dataType: 'json',
success: function(data) {
var result = '';
var appcontent="你好";
for(var i = 0; i < data.lists.length; i++) {
result += '<li><div class="ispeak"><img class="imgset" src="../../images/class_record/215135.jpg" >'+
'<i class="fa fa-caret-right"></i><div class="speakContent"><div>'+appcontent+'</div></div></div></li>';
}
// 爲了測試，延遲1秒加載
setTimeout(function() {
$('.lists').html(result);
// 每次數據加載完，必須重置
me.resetload();
// 重置頁數，從新獲取loadDownFn的數據
page = 0;
// 解鎖loadDownFn裏鎖定的狀況
me.unlock();
me.noData(false);
}, 1000);
},
error: function(xhr, type) {
alert('Ajax error!');
// 即便加載出錯，也得重置
me.resetload();
}
});
},
threshold: 50
});
//自定義的方法
$(".sended").children("li").last().find("div")[0].scrollIntoView();
$(".footer").css("bottom","1px");
$(".sendContent").on("focus",function(){
setTimeout(function(){
$(".sended").children("li").last().find("div")[0].scrollIntoView();
},400);
})
$(".sendContent").on("blur",function(){
$(".sended").children("li").last().find("div")[0].scrollIntoView();
})
$(".wrapper").on("resize",function(){
setTimeout(function(){
$(".sended").children("li").last().find("div")[0].scrollIntoView();
},400);
})
var appcontent="";
$(".sub").on("click",function(){
appcontent=$(".sendContent").val();
if(appcontent.length>0){
var apphtml="";
apphtml+='<li><div class="ispeak"><img class="imgset" src="../../images/class_record/215135.jpg" >'+
'<i class="fa fa-caret-right"></i><div class="speakContent"><div>'+appcontent+'</div></div></div></li>';
$(".sended").append(apphtml);
}
$(".sendContent").val("");
$(".sended").children("li").last().find("div")[0].scrollIntoView();
});
});
</script>
</body>
</html>
js
/** * dropload * 西門(http://ons.me/526.html) * 0.9.1(161205) */ !function(a){"use strict";function g(a){a.touches||(a.touches=a.originalEvent.touches)}function h(a,b){b._startY=a.touches[0].pageY,b.touchScrollTop=b.$scrollArea.scrollTop()}function i(b,c){c._curY=b.touches[0].pageY,c._moveY=c._curY-c._startY,c._moveY>0?c.direction="down":c._moveY<0&&(c.direction="up");var d=Math.abs(c._moveY);""!=c.opts.loadUpFn&&c.touchScrollTop<=0&&"down"==c.direction&&!c.isLockUp&&(b.preventDefault(),c.$domUp=a("."+c.opts.domUp.domClass),c.upInsertDOM||(c.$element.prepend('<div class="'+c.opts.domUp.domClass+'"></div>'),c.upInsertDOM=!0),n(c.$domUp,0),d<=c.opts.distance?(c._offsetY=d,c.$domUp.html(c.opts.domUp.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domUp.html(c.opts.domUp.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domUp.css({height:c._offsetY}))}function j(b){var c=Math.abs(b._moveY);""!=b.opts.loadUpFn&&b.touchScrollTop<=0&&"down"==b.direction&&!b.isLockUp&&(n(b.$domUp,300),c>b.opts.distance?(b.$domUp.css({height:b.$domUp.children().height()}),b.$domUp.html(b.opts.domUp.domLoad),b.loading=!0,b.opts.loadUpFn(b)):b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.upInsertDOM=!1,a(this).remove()}),b._moveY=0)}function k(a){""!=a.opts.loadDownFn&&a.opts.autoLoad&&a._scrollContentHeight-a._threshold<=a._scrollWindowHeight&&m(a)}function l(a){a._scrollContentHeight=a.opts.scrollArea==b?e.height():a.$element[0].scrollHeight}function m(a){a.direction="up",a.$domDown.html(a.opts.domDown.domLoad),a.loading=!0,a.opts.loadDownFn(a)}function n(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}var f,b=window,c=document,d=a(b),e=a(c);a.fn.dropload=function(a){return new f(this,a)},f=function(a,b){var c=this;c.$element=a,c.upInsertDOM=!1,c.loading=!1,c.isLockUp=!1,c.isLockDown=!1,c.isData=!0,c._scrollTop=0,c._threshold=0,c.init(b)},f.prototype.init=function(f){var l=this;l.opts=a.extend(!0,{},{scrollArea:l.$element,domUp:{domClass:"dropload-up",domRefresh:'<div class="dropload-refresh">↓下拉刷新</div>',domUpdate:'<div class="dropload-update">↑釋放更新</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>加載中...</div>'},domDown:{domClass:"dropload-down",domRefresh:'<div class="dropload-refresh">↑上拉加載更多</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>加載中...</div>',domNoData:'<div class="dropload-noData">暫無數據</div>'},autoLoad:!0,distance:50,threshold:"",loadUpFn:"",loadDownFn:""},f),""!=l.opts.loadDownFn&&(l.$element.append('<div class="'+l.opts.domDown.domClass+'">'+l.opts.domDown.domRefresh+"</div>"),l.$domDown=a("."+l.opts.domDown.domClass)),l._threshold=l.$domDown&&""===l.opts.threshold?Math.floor(1*l.$domDown.height()/3):l.opts.threshold,l.opts.scrollArea==b?(l.$scrollArea=d,l._scrollContentHeight=e.height(),l._scrollWindowHeight=c.documentElement.clientHeight):(l.$scrollArea=l.opts.scrollArea,l._scrollContentHeight=l.$element[0].scrollHeight,l._scrollWindowHeight=l.$element.height()),k(l),d.on("resize",function(){clearTimeout(l.timer),l.timer=setTimeout(function(){l._scrollWindowHeight=l.opts.scrollArea==b?b.innerHeight:l.$element.height(),k(l)},150)}),l.$element.on("touchstart",function(a){l.loading||(g(a),h(a,l))}),l.$element.on("touchmove",function(a){l.loading||(g(a,l),i(a,l))}),l.$element.on("touchend",function(){l.loading||j(l)}),l.$scrollArea.on("scroll",function(){l._scrollTop=l.$scrollArea.scrollTop(),""!=l.opts.loadDownFn&&!l.loading&&!l.isLockDown&&l._scrollContentHeight-l._threshold<=l._scrollWindowHeight+l._scrollTop&&m(l)})},f.prototype.lock=function(a){var b=this;void 0===a?"up"==b.direction?b.isLockDown=!0:"down"==b.direction?b.isLockUp=!0:(b.isLockUp=!0,b.isLockDown=!0):"up"==a?b.isLockUp=!0:"down"==a&&(b.isLockDown=!0,b.direction="up")},f.prototype.unlock=function(){var a=this;a.isLockUp=!1,a.isLockDown=!1,a.direction="up"},f.prototype.noData=function(a){var b=this;void 0===a||1==a?b.isData=!1:0==a&&(b.isData=!0)},f.prototype.resetload=function(){var b=this;"down"==b.direction&&b.upInsertDOM?b.$domUp.css({height:"0"}).on("webkitTransitionEnd mozTransitionEnd transitionend",function(){b.loading=!1,b.upInsertDOM=!1,a(this).remove(),l(b)}):"up"==b.direction&&(b.loading=!1,b.isData?(b.$domDown.html(b.opts.domDown.domRefresh),l(b),k(b)):b.$domDown.html(b.opts.domDown.domNoData))}}(window.Zepto||window.jQuery);
- 1. Jquery手機下拉刷新，下拉加載數據
- 2. 下拉刷新
- 3. 下拉刷新 + 上拉刷新 （2）
- 4. 下拉刷新 + 上拉刷新 （1）
- 5. 上拉刷新和下拉刷新
- 6. 下拉刷新+Recycle+上拉刷新
- 7. jsp手機端網頁實現下拉刷新，上拉加載
- 8. h5實現下拉刷新上拉加載（兼容iOS手機）
- 9. 利用vux作手機上拉刷新下拉加載
- 10. 上拉下拉刷新(1)
- 更多相關文章...
- • ionic 下拉刷新 - ionic 教程
- • MySQL 5.7的新特性（新功能） - MySQL教程
- • 漫談MySQL的鎖機制
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Jquery手機下拉刷新，下拉加載數據
- 2. 下拉刷新
- 3. 下拉刷新 + 上拉刷新 （2）
- 4. 下拉刷新 + 上拉刷新 （1）
- 5. 上拉刷新和下拉刷新
- 6. 下拉刷新+Recycle+上拉刷新
- 7. jsp手機端網頁實現下拉刷新，上拉加載
- 8. h5實現下拉刷新上拉加載（兼容iOS手機）
- 9. 利用vux作手機上拉刷新下拉加載
- 10. 上拉下拉刷新(1)