大象只为你
大象只为你
  • 发布:2016-12-21 17:38
  • 更新:2016-12-22 17:29
  • 阅读:2260

mui 图文列表 a 链接失效

分类:MUI
mui.init({  
    pullRefresh: {  
        container: '#pullrefresh',  
        down: {//下拉刷新  
            auto:true,//可选,默认false.自动下拉刷新一次  
            contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容  
            contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容  
            contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容  
            contentnomore:'暂无数据',//可选,请求完毕若没有更多数据时显示的提醒内容;  
            callback: pulldownRefresh  
        },  
        up: {//上拉加载  
            auto:true,//可选,默认false.自动上拉加载一次  
            contentrefresh: '正在加载...',  
            contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;  
            callback: pullupRefresh  
        }  
    }  
});  

// 下拉刷新具体业务实现  
function pulldownRefresh() {              
    setTimeout(function() {               
        pageNow = 1;//刷新并显示第一页                          
        type=1;//代表下拉刷新  
        showLsit(pageNow,type);//具体取数据的方法  
    }, 100);  
}  

// 上拉加载具体业务实现  
function pullupRefresh() {             
    setTimeout(function() {  
        pageNow++;//翻下一页  
        type=2;//代表上拉加载  
        showLsit(pageNow,type);//具体取数据的方法  
    }, 100);  
}  

function showLsit(pageNow,type) {  
    var url = G_URL_MERCH_GETLIST;            
    var search = $("#search").val();    // 搜索框的内容  
    jQuery.ajax({  
        url: url,  
        type: "post",  
        data: {"userId" : G_VAR_USERID, "accessToken" : G_VAR_ACCESSTOKEN,"search":search,"pageNow":pageNow,"pageSize":pageSize},  
        dataType: "json",  
        async: false,  
        success: function (result) {  
            if (result.errcode == "0") {  
                var listUL =  $(".mui-table-view");                       
                if (result.list != null && result.list.length > 0) {  
                    if(pageNow == 1){  
                        listUL.html("");    // 清空已经加载的数据  
                    }  
                    for (var int = 0; int < result.list.length; int++) {          
                        var index = 1;  
                        var merchProd = result.list[int];   // 产品对象  
                        var basMerch = merchProd.basMerch;  // 商户对象  
                        // 品牌图片  
                        var prodPhoto = merchProd.prodPhoto == null || merchProd.prodPhoto == "" ? "images/noload.png"  : merchProd.prodPhoto;  
                        var url = "merchProdDetail.html?reqUserId="+G_VAR_USERID+"&accessToken="+G_VAR_ACCESSTOKEN+"&reqUserName="+G_VAR_USERNAME+"&bizId="+merchProd.bizId;                                          
                        listUL.append(' <li class="mui-table-view-cell czl-table-view-cell mui-media" id="'+merchProd.bizId+'"  > ');                         
                        listUL.append(' <a class="alink" href="javascript:void(0);" title="'+merchProd.prodName+'" id="'+merchProd.bizId+'" bizId="'+merchProd.bizId+'" onclick="detailLink(this)" > ');  
                        listUL.append(' <img class="mui-media-object czl-media-object mui-pull-left" src="'+prodPhoto+'"  width="100" bizId="'+merchProd.bizId+'" >  ');  
                        listUL.append(' <div class="mui-media-body"> ');  
                        listUL.append(' <div class="brand">'+merchProd.prodName+'</div> ');  
                        listUL.append(' <div class="subTitle">'+basMerch.orgName+'</div> ');  

                        if(basMerch.orgAddr != null && basMerch.orgAddr != ""){  
                            listUL.append(' <div class="subTitle">地址:'+basMerch.orgAddr+'</div> ');  
                            index ++;  
                        }  
                        if(basMerch.orgTel != null && basMerch.orgTel != "" ){  
                            listUL.append(' <div class="subTitle">电话:'+basMerch.orgTel+'</div> ');  
                            index ++;  
                        }  
                        if(basMerch.orgFax != null && basMerch.orgFax != ""){  
                            listUL.append(' <div class="subTitle">传真:'+basMerch.orgFax+'</div> ');  
                            index ++;  
                        }  
                        if(basMerch.orgEmail != null && basMerch.orgEmail != "" && index < 4){  
                            listUL.append(' <div class="subTitle">邮箱:'+basMerch.orgEmail+'</div> ');                              
                        }                         
                        listUL.append(' </div></a></li> ');           

                    }                                         
                }else{                    
                    if(pageNow == 1){  
                        listUL.html("");    // 清空已经加载的数据  
                    }  
                    listUL.append(' <li class="mui-table-view-cell czl-table-view-cell mui-media"> ');  
                    listUL.append(' <div class="mui-media-body"><p class="subTitle">暂无数据!</p></div> ');  
                    listUL.append(' </li> ');                    
                }  
                count = result.count;  
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();//结束下拉刷新  
                if(type==1){//上拉刷新  
                      /*下面这句很关键!*/  
                      mui('#pullrefresh').pullRefresh().refresh(true);//有重新触发上拉加载的需求(比如当前类别已无更多数据,但切换到另外一个类别后,应支持继续上拉加载)      
                 }                         

                 //  结束上拉加载,并根据情况切换“下拉显示更多数据”,以及“没有更多数据了”。执行endPullupToRefresh()方法,  
                 // 结束转雪花进度条的“正在加载...”过程,若还有更多数据,则传入false; 否则传入true,之后滚动条滚动到底时  
                 if( pageNow >= result.totalPage){  
                     mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  
                 } else {  
                     mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);  
                 }  
            }else{  
                //获取异常                    
                mui.toast('获取异常,请稍候再试');      
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  
            }  
        },  
        error: function (returndata) {    
            //获取异常  
            mui.toast('网络异常,请稍候再试');             
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  
        }  
    });  

}  

function detailLink(obj){  
    var bizId = $(obj).attr("bizId");  
    var url = "merchProdDetail.html?reqUserId="+G_VAR_USERID+"&accessToken="+G_VAR_ACCESSTOKEN+"&reqUserName="+G_VAR_USERNAME+"&bizId="+bizId;   
    mui.openWindow({  
        id: "merchProdDetail",  
        url: encodeURI(url),      
         waiting:{  
          autoShow:true,//自动显示等待框,默认为true  
          title:'正在加载...',//等待对话框上显示的提示内容  

         }  
    });  
}

页面

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" >  
        <div class="mui-scroll">               
            <ul class="mui-table-view czl-table-view">  
                <!-- 数据内容 -->             

            </ul>  
        </div>  
    </div>   

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){  

      //获取id  
      var id = this.getAttribute("id");  
      var url = "merchProdDetail.html?reqUserId="+G_VAR_USERID+"&accessToken="+G_VAR_ACCESSTOKEN+"&reqUserName="+G_VAR_USERNAME+"&bizId="+id;     
      //传值给详情页面,通知加载新数据  
     mui.fire(url,'bizId',{id:id});   
      //打开新闻详情  
      mui.openWindow({  
        id:'detail',  
        url:url  
      });   
    }) 
2016-12-21 17:38 负责人:无 分享
已邀请:
fangyou

fangyou

代码看着头疼

  1. 拼装页面可以用vue.js

  2. 页面之间传值,个人喜欢用 本地缓存
    localStorage.setItem("username",username);
    var username = localStorage.getItem("username");
    localStorage.removeItem("username");

vue.js使用

vue-resource.min.js  
vue.js  

<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>  

绑定  
<div id="app">  
  {{ message }}  
  <input v-model="message">  
</div>  

new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue.js!'  
  }  
})  

事件  
  <button v-on:click="haha">haha123</button>  

  v-on:keyup.enter="addTodo"  

  methods: {  
    haha: function () {  
      this.message = this.message.split('').reverse().join('')  
    }  
  }  
页面完成加载  
ready: function () {  
    this.get(1)//调用其他方法  
}  

判断  
<p v-if="greeting">Hello!</p>  

循环  
<li v-for="todo in todos">  
  {{ todo.text }}  
     {{$index}}从0开始的索引  
</li>  

ajax 网络请求(需要加载vue-resource.js)  
apiUrl = "api/page/get?currentPage=" + id + "&key=" + this.key + "&select=" + this.select;  
this.$http.get(apiUrl)  
        .then(function (response) {  
            this.$set('result', response.data);  
        })
  • 大象只为你 (作者)

    你好,谢谢你的回复,我后面终于知道怎么处理了,js append的问题,修改成 html拼接,然后再给赋值就可以了,我也是想不通为什么,应该是我前面listUL.html(""); // 清空已经加载的数据 这个,后面都只能用listUL.html(html字符串)

    2016-12-22 22:26

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