moods
moods
  • 发布:2020-12-09 10:10
  • 更新:2020-12-09 10:26
  • 阅读:1145

mui做下拉刷新,列表向上滑动直接触发刷新而不是向上滚动列表

分类:MUI

之前还做了列表右侧的字母定位,使用了mui.indexedlist.js,然后在这个dom结构基础上添加了下拉刷新的dom结构,导致只要是向上滑动列表就会触发刷新,下拉列表后没办法上拉回到列表上面

2020-12-09 10:10 负责人:无 分享
已邀请:
moods

moods (作者)

''' <!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="css/mui.min.css" rel="stylesheet" />  
    <link href="css/phone.css" rel="stylesheet" />  
    <link rel="stylesheet" type="text/css" href="css/mui.indexedlist.css" />  
    <style>  
        html,  
        body {  
            height: 100%;  
            overflow: scroll;  
        }  

        .mui-bar {  
            -webkit-box-shadow: none;  
            box-shadow: none;  
        }  
    </style>  
</head>  

<body>  
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <div id="list" class="mui-indexed-list">  
                <div class="mui-indexed-list-search mui-input-row mui-search" style="display: block;width: 100%;height: 0px;">  
                    <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索联系人">  
                </div>  
                <div class="mui-indexed-list-bar" id="word">  
                    <a>A</a>  
                    <a>B</a>  
                    <a>C</a>  
                    <a>D</a>  
                    <a>E</a>  
                    <a>F</a>  
                    <a>G</a>  
                    <a>H</a>  
                    <a>I</a>  
                    <a>J</a>  
                    <a>K</a>  
                    <a>L</a>  
                    <a>M</a>  
                    <a>N</a>  
                    <a>O</a>  
                    <a>P</a>  
                    <a>Q</a>  
                    <a>R</a>  
                    <a>S</a>  
                    <a>T</a>  
                    <a>U</a>  
                    <a>V</a>  
                    <a>W</a>  
                    <a>X</a>  
                    <a>Y</a>  
                    <a>Z</a>  
                </div>  
                <div class="mui-indexed-list-alert"></div>  
                <div class="mui-indexed-list-inner">  
                    <div class="mui-indexed-list-empty-alert">没有数据</div>  
                    <ul id="userList" class="mui-table-view mui-table-view-chevron">  
                        <li data-group="A" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">A</li>  
                        <li data-group="B" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">B</li>  
                        <li data-group="C" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">C</li>  
                        <li data-group="D" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">D</li>  
                        <li data-group="E" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">E</li>  
                        <li data-group="F" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">F</li>  
                        <li data-group="G" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">G</li>  
                        <li data-group="H" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">H</li>  
                        <li data-group="I" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">I</li>  
                        <li data-group="J" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">J</li>  
                        <li data-group="K" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">K</li>  
                        <li data-group="L" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">L</li>  
                        <li data-group="M" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">M</li>  
                        <li data-group="N" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">N</li>  
                        <li data-group="O" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">O</li>  
                        <li data-group="P" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">P</li>  
                        <li data-group="Q" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">Q</li>  
                        <li data-group="R" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">R</li>  
                        <li data-group="S" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">S</li>  
                        <li data-group="T" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">T</li>  
                        <li data-group="U" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">U</li>  
                        <li data-group="V" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">V</li>  
                        <li data-group="W" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">W</li>  
                        <li data-group="X" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">X</li>  
                        <li data-group="Y" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">Y</li>  
                        <li data-group="Z" style="pointer-events: none;" class="mui-table-view-divider mui-indexed-list-group">Z</li>  
                    </ul>  
                </div>  
            </div>  
        </div>  
    </div>  
    <img id="addUser" src="img/addUser.jpg" style="position: fixed;top: 88%;left: 76%;width: 15%;border-radius: 50%;z-index: 999;" />  
    <script src="js/jquery.min(1).js" type="text/javascript" charset="utf-8"></script>  
    <script src="js/mui.min.js"></script>  
    <script src="js/mui.indexedlist.js"></script>  
    <script src="js/pinyinjs_pinyinUtil.js" type="text/javascript" charset="utf-8"></script>  
    <script src="js/list.js" type="text/javascript"></script>  
    <script src="js/webSql.js" type="text/javascript"></script>  
</body>  

</html>'''

moods

moods (作者)

'''var submitFlag = 0;
mui.init({
pullRefresh: {
container: "#refreshContainer", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down: {
height: 50, //可选,默认50.触发下拉刷新拖动距离,
auto: false, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback: function() {
freshUser();
} //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
},
});
mui.plusReady(function() {
freshUser();
})

function freshUser() {
loadInfo(returnLoadInfo);
}

function returnLoadInfo(result) {
///每次加载把之前加载的数据清除
$(".mui-table-view .mui-indexed-list-group").nextAll().not(".mui-indexed-list-group").remove();
for(var key = 0; key < result.rows.length; key++) {
var pinyin = ConvertPinyin(result.rows[key].name).substring(0, 1);
// console.log(pinyin);
var pinyinAll = ConvertPinyin(result.rows[key].name).substring(0);
// console.log(pinyinAll);
var blogname = result.rows[key].name;
var pinyinname = "";
for(var i = 0; i < result.rows[key].name.length; i++) {
pinyinname += ConvertPinyin(result.rows[key].name).substring(0, 1);
}
//循环字母列表
$(".mui-table-view .mui-indexed-list-group").each(function() {
if($(this).html() == pinyin) {
var html = "";
html = "<li id=" + result.rows[key].id + "class=" + "mui-table-view-cell mui-media mui-indexed-list-item" + ">" +
"<a href='#'>" +
"<div class='mui-media-body'>" +
"<label class='people'>" + result.rows[key].name + "</label>" +
"<label class='enterprise'>" + result.rows[key].company + "</label>" +
"<p class='mui-ellipsis'>" + result.rows[key].tel + "</p>" +
"</div>" +
"</a>" +
"</li>";
$(this).after(html);
}

    });  

}  
//将后面没有值得字母列表隐藏  
$(".mui-table-view .mui-indexed-list-group").each(function() {  
    //                    console.log(JSON.stringify($(this).next().length))  
    if($(this).next().hasClass("mui-indexed-list-group") || $(this).next().length == 0) {  
        $(this).remove();  
    }  
})  
var header = document.querySelector('header.mui-bar');  
var list = document.getElementById('list');  
//calc hieght  

list.style.height = (document.body.offsetHeight) + 'px';  

//                  list.style.height = 1000 + 'px';  
//create   
window.indexedList = new mui.IndexedList(list);  
mui('#refreshContainer').pullRefresh().endPulldown();  

//  for(var i = 0; i < result.rows.length; i++) {  
//      var li = document.createElement("li");  
//      li.className = 'mui-table-view-cell mui-media';  
//      li.id = result.rows[i].id;  
//      li.innerHTML = "<a href='#'>" +  
//          "<div class='mui-media-body'>" +  
//          "<label class='people'>" + result.rows[i].name + "</label>" +  
//          "<label class='enterprise'>" + result.rows[i].company + "</label>" +  
//          "<p class='mui-ellipsis'>" + result.rows[i].tel + "</p>" +  
//          "</div>" +  
//          "</a>"  
//      document.getElementById("userList").appendChild(li);  
//  }  

}

document.getElementById("addUser").addEventListener('tap', function() {
submitFlag = 0;

mui.openWindow({  
    url: 'add.html',  
    id: 'add.html',  
    //          extras: {  
    //              submitFlagS: submitFlag  
    //          }  
});  
var list = plus.webview.getWebviewById('add.html'); //接收参数的窗口对象   
list.evalJS('getData(\'' + JSON.stringify(submitFlag) + '\')'); //自定义函数getData()  

});

window.addEventListener('refreshList', function() {
// freshUser();
location.reload();
});

mui('#userList').on('tap', 'li', function() {
submitFlag = 1;
// var title=document.getElementById("title");
// console.log(title);
// title.innerHTML="编辑联系人";

var next = mui.preload({  
    url: "add.html",  
    id: "add.html"  
});  
//      var next=plus.webview.getWebviewById("add.html");  
//      console.log(next);  
var liId = this.getAttribute('id');  
setTimeout(function() {  
    mui.fire(next, 'showInfo', {  
        'id': liId  
    });  
}, 100);  
mui.openWindow({  
    url: "add.html",  
    id: "add.html",  
    //          extras: {  
    //              submitFlagS: submitFlag  
    //          }  
});  
var list = plus.webview.getWebviewById('add.html'); //接收参数的窗口对象   
list.evalJS('getData(\'' + JSON.stringify(submitFlag) + '\')'); //自定义函数getData()  

})'''

该问题目前已经被锁定, 无法添加新回复