搜索结果列表问题，再次搜索，列表不回顶部

分类：MUI

搜索一个后把列表拉到底，再搜另一个的时候，列表不显示。
是我上拉加载的问题吗？

mui('#scroll2').pullRefresh({  
    up: {  
         contentrefresh: "正在加载...",  
         contentnomore: "没有更多数据了",  
         callback: getMoreItem2  
     }  
});

function getMoreItem2(){  
            var str = "";  
            var keyword = document.getElementById('kw-p').getAttribute('title');  
            var linum = mui('.kw-p li').length;  
            var fragment = document.createDocumentFragment();  
            var li;  
            mui.ajax({  
                url:'http://192.168.10.119:8000/sw/api/taoci/init.php',  
                type:'post',  
                data:{type:"search",kw:keyword,size:'8',offset:linum},  
                dataType:'json',  
                success:function(result){  
                    if(result['product']){  
                        plus.nativeUI.toast("正在加载...");  
                        mui.each(result['product'],function(index,item){  
                            li = document.createElement('li');  
                            li.className = 'mui-table-view-cell mui-media';  

                            str = "<a href='javascript:;' id='"+item['itemid']+"'>"+  
                                        "<img class='mui-media-object mui-pull-left' src='";  
                            if(item['thumb']){  
                                str += item['thumb'];  
                            }else{  
                                str += "../images/default_photo.png";  
                            }  
                                str +="'>";  
                                str += "<div class='mui-media-body'>"+  
                                            item['title']+'-'+item['itemid']+  
                                            "<p class='mui-ellipsis'>价格：<span class='tse-font-red'>"+item['price']+"</span>"+  
                                            "销量："+item['sales']+"</p>"+  
                                        "</div></a>";  

                            li.innerHTML = str;  
                            //console.log(li);  
                            fragment.appendChild(li);  
                        });  
                        //console.log(fragment);  
                        document.querySelector('#kw-p').appendChild(fragment);  

                    }else{  
                        plus.nativeUI.toast("暂时没有更多的信息了！");  
                    }  
                }  
            });  

            mui('#scroll2').pullRefresh().refresh(true);  
            //关闭上拉图标  
            mui('#scroll2').pullRefresh().endPullupToRefresh();  
        }

2016-01-12 15:52 负责人:无分享

4 个回复

TseWayne (作者)

来人啊

DCloud_UNI_FXY

发可运行，可重现该问题的测试工程

TseWayne (作者)

子页面，怎么重置？就像web上面，点击查询，页面重新加载结果列表。或者页面自动返回底部

2016-01-20 11:43
DCloud_UNI_FXY

回复 TseWayne:截图描述问题

2016-01-20 15:01
TseWayne (作者)

我把代码发下面了。。这样行吗？

2016-01-20 15:36
TseWayne (作者)

回复 DCloud_UNI_FXY: 把 192.168.10.119:8000/sxinw 换成 www,sxinw.com 可以获取数据。

2016-01-20 15:38
DCloud_UNI_FXY

回复 TseWayne:发可以直接运行的测试工程

2016-01-20 15:45
TseWayne (作者)

怎么发。。。。我是小白

2016-01-20 16:55
TseWayne (作者)

回复 DCloud_UNI_FXY:怎么发。。。。我是小白

2016-01-20 16:55

TseWayne (作者)

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="../css/mui.min.css">  
        <link rel="stylesheet" type="text/css" href="../css/app.css"/>  
        <style type="text/css">  

            #list {  
                /*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/  
                margin-top: -1px;  
            }  
            .mui-col-xs-4{width:50%;}  

            .mui-table-view .mui-media-object {line-height: 82px;max-width: 82px;height: 82px;}  
            .mui-table-view .mui-media{font-size:15px;}  
            .mui-table-view .mui-media p{font-size:13px;}  

            .mui-content>.mui-table-view:first-child {margin-top: 1px;}  
            .mui-table-view-cell > a:not(.mui-btn) {  
                white-space: inherit;  
                color: inherit;  
            }  
            .mui-table-view .mui-media .mui-media-body .tse-mg-tb{margin: 9px 0px;}  
            .tse-font-red{font-size:14px;color: red;margin-right: 20px;}  
            /*#scroll1{overflow-y: scroll;}  
            #scroll2{overflow-y: scroll;}*/  
            .tse-click-more{text-align: center;padding: 9px;}  
        </style>  
    </head>  

    <body>  
        <div class="mui-content">  
            <div id="slider" class="mui-slider mui-fullscreen" style="margin-top: 1px;">  
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-positive">  
                    <a class="mui-control-item" href="#item1mobile">  
                        商家  
                    </a>  
                    <a class="mui-control-item" href="#item2mobile">  
                        产品  
                    </a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="scroll1" class="mui-scroll-wrapper">  
                            <div class="mui-scroll" id="company_list">  

                            </div>  
                        </div>  
                    </div>  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll2" class="mui-scroll-wrapper">  
                            <div class="mui-scroll" id="product_list">  

                            </div>  
                        </div>  

                    </div>  
                </div>  
            </div>  
        </div>  
    </body>  
    <script src="../js/mui.min.js"></script>  
    <script src="../js/mui.pullToRefresh.js"></script>  
    <script src="../js/mui.pullToRefresh.material.js"></script>  
    <script>  
        mui.init();  

        //plus.webview.currentWebview().setStyle({scrollIndicator:'none'});  
        var urlCell = 'http://192.168.10.119:8000/sxinw/api/taoci/init.php';  
        //添加自定义事件监听  
        window.addEventListener('keyWord', function(event) {  
            var keyword = event.detail.keyword;  

            mui.plusReady(function(){  
                plus.nativeUI.showWaiting("正在加载...");  
                mui.ajax({  
                    url:urlCell,  
                    type:'post',  
                    data:{type:"search",kw:keyword},  
                    dataType:'json',  
                    success:function(result){  
                        var htmlP = "";  
                        var htmlC = "";  
                        var html1 = "";  
                        var html2 = "";  
                        var ul1 = "<ul class='mui-table-view kw-c' id='kw-c' title='"+keyword+"'>";  
                        var ul3 = "<ul class='mui-table-view kw-p' id='kw-p' title='"+keyword+"'>";  
                        var ul2 = '</ul>';  
                        if(result['backStatus']!='-1'){  
                            if(result['product']){  
                                htmlP = myEach(result['product'],'product');  
                                html2 = ul3+htmlP+ul2;  
                            }else{  
                                html2 = "<h5 style='text-align:center'>暂无相关数据</h5>";  
                            }  

                            if(result['company']){  
                                htmlC = myEach(result['company'],'company');  
                                html1 = ul1+htmlC+ul2;  
                            }else{  
                                html1 = "<h5 style='text-align:center'>暂无相关数据</h5>";  
                            }  

                            document.querySelector('#company_list').innerHTML = html1;  
                            document.querySelector('#product_list').innerHTML = html2;  
                        }else{  
                            document.querySelector('.mui-content').innerHTML = "<p>&nbsp;</p>"+result['content'];  
                        }  

                        plus.nativeUI.closeWaiting();  
                        forProduct();  
                    }  
                });  
            });  
        });  

        mui('#scroll1').pullRefresh({  
            up: {  
                contentrefresh: "正在加载...",  
                contentnomore: "没有更多数据了",  
                callback: getMoreItem1  
            }  
        });  

        mui('#scroll2').pullRefresh({  
            up: {  
                contentrefresh: "正在加载...",  
                contentnomore: "没有更多数据了",  
                callback: getMoreItem2,  

            }  

        });  

        function getMoreItem1(){  
            var str = '';  
            var keyword = document.getElementById('kw-c').getAttribute('title');  
            var linum = mui('.kw-c li').length;  
            var fragment = document.createDocumentFragment();  
            var li;  
            mui.ajax({  
                url:urlCell,  
                type:'post',  
                data:{type:"search",kw:keyword,size:'8',offset:linum},  
                dataType:'json',  
                success:function(result){  
                    if(result['company']){  
                        plus.nativeUI.toast("正在加载...");  
                        mui.each(result['company'],function(index,item){  
                            li = document.createElement('li');  
                            li.className = 'mui-table-view-cell mui-media';  

                            str = "<a href='javascript:;' id='"+item['userid']+"' title='cinfo'>"+  
                                        "<img class='mui-media-object mui-pull-left' src='";  
                            if(item['thumb']){  
                                str += item['thumb'];  
                            }else{  
                                str += "../images/default_photo.png";  
                            }  
                            str +="'>";  
                            str += "<div class='mui-media-body'>"+  
                                        item['company']+  
                                        "<p class='mui-ellipsis tse-mg-tb'>"+item['business']+"</p>"+  
                                        "<p class='mui-ellipsis'>"+item['sname']+"/"+item['cname']+"</p>"+  
                                   "</div></a>";  

                            li.innerHTML = str;  
                            fragment.appendChild(li);  
                        });  
                        document.querySelector('#kw-c').appendChild(fragment);  

                    }else{  
                        plus.nativeUI.toast("暂时没有更多的信息了！");  

                    }  
                        //关闭上拉图标  
                        mui('#scroll1').pullRefresh().endPullupToRefresh();  
                }  
            });   
        }  

        function getMoreItem2(){  
            var str = "";  
            var keyword = document.getElementById('kw-p').getAttribute('title');  
            var linum = mui('.kw-p li').length;  
            var fragment = document.createDocumentFragment();  
            var li;  
            mui.ajax({  
                url:urlCell,  
                type:'post',  
                data:{type:"search",kw:keyword,size:'8',offset:linum},  
                dataType:'json',  
                success:function(result){  

                    if(result['product']){  
                        plus.nativeUI.toast("正在加载...");  
                        mui.each(result['product'],function(index,item){  
                            li = document.createElement('li');  
                            li.className = 'mui-table-view-cell mui-media';  

                            str = "<a href='javascript:;' id='"+item['itemid']+"' title='pinfo'>"+  
                                        "<img class='mui-media-object mui-pull-left' src='";  
                            if(item['thumb']){  
                                str += item['thumb'];  
                            }else{  
                                str += "../images/default_photo.png";  
                            }  
                                str +="'>";  
                                str += "<div class='mui-media-body'>"+  
                                            item['title']+'-'+item['itemid']+  
                                            "<p class='mui-ellipsis'>价格：<span class='tse-font-red'>"+item['price']+"</span>"+  
                                            "销量："+item['sales']+"</p>"+  
                                        "</div></a>";  

                            li.innerHTML = str;  
                            fragment.appendChild(li);  
                        });  
                        document.querySelector('#kw-p').appendChild(fragment);  

                    }else{  
                        plus.nativeUI.toast("暂时没有更多的信息了！");  
                    }  
                    //关闭上拉图标  
                    mui('#scroll2').pullRefresh().endPullupToRefresh();  
                }  
            });   
        }  

        //遍历  
        function myEach(data,type){  
            var html = "";  
            if(type == 'company'){  
                mui.each(data,function(index,item){  
                    html += "<li class='mui-table-view-cell mui-media'>"+  
                                 "<a href='javascript:;' id='"+item['userid']+"' title='cinfo'>"+  
                                    "<img class='mui-media-object mui-pull-left' src='";  
                    if(item['thumb']){  
                        html += item['thumb'];  
                    }else{  
                        html += "../images/default_photo.png";  
                    }  
                    html +="'>";  
                    html += "<div class='mui-media-body'>"+  
                                item['company']+  
                                "<p class='mui-ellipsis tse-mg-tb'>"+item['business']+"</p>"+  
                                "<p class='mui-ellipsis'>"+item['sname']+"/"+item['cname']+"</p>"+  
                           "</div></a></li>";  
                });  
            }else if(type == 'product'){  
                mui.each(data,function(index,item){  
                    html += "<li class='mui-table-view-cell mui-media'>"+  
                             "<a href='javascript:;' id='"+item['itemid']+"' title='pinfo'>"+  
                                "<img class='mui-media-object mui-pull-left' src='";  
                    if(item['thumb']){  
                        html += item['thumb'];  
                    }else{  
                        html += "../images/default_photo.png";  
                    }  
                        html +="'>";  
                        html += "<div class='mui-media-body'>"+  
                                    item['title']+  
                                    "<p class='mui-ellipsis'>价格：<span class='tse-font-red'>"+item['price']+"</span>"+  
                                    "销量："+item['sales']+"</p>"+  
                                "</div></a></li>";  
                });  
            }else{  
                html = "";  
            }  

            return html;  
        }  

    //产品详情  
    function forProduct(){  
        mui('.mui-table-view').on('tap', 'a', function() {  
            var toid;  
            var tourl;  
            var itemId = this.getAttribute("id");  
            var thistitle = this.getAttribute("title");  
            var webview_style = {  
                popGesture: "close"  
            };  

            if(thistitle == 'cinfo'){  
                toid = 'c-detail';  
                tourl = 'c-detail.html';  
            }else{  
                toid = 'p-detail';  
                tourl = 'p-detail.html';  
            }  
            mui.openWindow({  
                id: toid,  
                url: tourl,  
                styles: webview_style,  
                extras:{  
                  pid:itemId  
                },  
                show: {  
                     autoShow:true,  
                },  
                waiting: {  
                    autoShow: false  
                }  
            });  
        });  
    }  

    </script>  

</html>

TseWayne (作者)

这个是父页面；上面的是子页面

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>sxinw.com</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link href="../css/mui.min.css" rel="stylesheet"/>  
        <link href="../css/style.css" rel="stylesheet"/>  
    </head>  

    <body>  
        <div class="mui-bar mui-bar-nav tse-head-div">  
            <a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <input type="text" name="keyword" class="tse-head-input mui-input-clear" id="keywords" placeholder="马可波罗瓷砖"/>  
            <span class="mui-icon mui-icon-search tse-head-search" id="submit"></span>  
        </div>  

        <script src="../js/mui.min.js"></script>  
        <script src="../js/update.js" type="text/javascript" charset="utf-8"></script>  
        <script>  
            document.querySelector('#keywords').focus();  
            var menu = null,  
                main = null;  
            var showMenu = false;  
            mui.init({  
                swipeBack: false,  
                statusBarBackground: '#f7f7f7',  
                gestureConfig: {  
                    doubletap: true  
                },  
                subpages: [{  
                    id: 'search-list',  
                    url: 'search-list.html',  
                    styles: {  
                        top: '45px',  
                        bottom: 0,  
                        bounce: 'vertical'  
                    }  
                }]  
            });  
            mui.plusReady(function() {  
                //仅支持竖屏显示  
                plus.screen.lockOrientation("portrait-primary");  
                main = plus.webview.currentWebview();  

            });  

            //搜索  
            var searchList = null;  
            var btn = document.querySelector('#submit');  
            btn.addEventListener("tap",function(){  

                var kw = document.querySelector('#keywords').value;  
                document.querySelector('#keywords').blur();  
                //获得页面  
                  if(!searchList){  
                    searchList = plus.webview.getWebviewById('search-list');  
                  }  
                  //触发页面的keyWord事件  
                  mui.fire(searchList,'keyWord',{  
                    keyword:kw  
                  });  

            });  

        </script>  
    </body>  

</html>

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

搜索结果列表问题，再次搜索，列表不回顶部

4 个回复

公告

相关问题

搜索结果列表问题 ，再次搜索，列表不回顶部

与内容相关的链接

4 个回复

公告

相关问题

搜索结果列表问题，再次搜索，列表不回顶部