手机下拉刷新

其他 2018-05-23 10:11:11 阅读次数: 2

css

speaking.css

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
}

html {
    font-size: 10px;
}

body {
    background-color: #E6E6E6;
    font-size: 1.2em;
}
/*主体内容*/
.content {
    padding-bottom: 71px;
    background-color: #E6E6E6;
}
.content li {
    width: 100%;
    list-style: none;
}

.content li>div {
    padding: 5px;
}

.content li>div:after {
    content: "";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}


/*说话的内容*/
.speakContent{
    width: 80%;
    padding: 5px 0px;
    min-height: 30px;
    display: block;
    float: left;
    margin-right: 5%;
    
}
.speakContent>div{
    border-radius: 5px;
    padding: 5px;
}

.imgset {
    width: 10%;
    height: 30px;
    display: block;
}


.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);

猜你喜欢

转载自my.oschina.net/u/3356110/blog/1491218
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022