1.实现上拉分页,Google兼容问题,weui框架提供的模板是这样的($(document.body).infinite()),在body定一个div通过这个div,实现上拉
1 $('#wrapper').infinite().on("infinite", function() { 2 if(loading) 3 return; 4 loading = true; 5 setTimeout(function() { 6 page++; 7 //你的操作 8 }, 2000); 9 });
2.多图片预览问题,通过pb1.open(imgEle.index());,指定预览的图片,下面的索引是正确的,但是图片始终显示第一张图片。目前没有找到好的办法解决
1 function showImg(e){ 2 var imgEle=e; 3 var arrImage=[]; 4 var obj={}; 5 obj.onSlideChange=function(index) { 6 }; 7 obj.onOpen = function() { 8 }; 9 obj.onClose = function() { 10 } 11 imgEle.parent().children().each(function(i,e){ 12 var imgSrc = $(e).attr('src'); 13 arrImage.push(imgSrc.replace('small','medium')); 14 }); 15 obj.items=arrImage; 16 var pb1 = $.photoBrowser(obj); 17 pb1.open(imgEle.index()); 18 }
3.weui本身的弹窗有一定的兼容性,有时候弹窗会引起页面的错乱,建议使用dialog.min.js。的弹出框,有安卓和ios两种显示
4.页面中评论弹出框,不能显示在页面底部,特别是苹果手机,如果要让评论框一直显示底部。请不要使用,weUI默认的上拉和下拉代码。可以参考如下代码
1 /*上拉加载数据 start*/ 2 jQuery('#wrapper').infinite().on("infinite", function() { 3 if(loading) 4 return; 5 loading = true; 6 setTimeout(function() { 7 page++; 8 //你的操作 9 }, 2000); 10 }); 11 /*上拉加载数据 end*/ 12 /*下拉更新数据start*/ 13 $('#wrapper').pullToRefresh().on("pull-to-refresh", function() { 14 setTimeout(function() { 15 //你的操作 16 }, 1000); 17 }); 18 /*下拉加载更多end*/
1 <div class="footer"> 2 <textarea id="commentText" rows="8"></textarea> 3 <span class="sendNoTo" id="sendSpan">发送</span> 4 </div>
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 34px;
background: #ebebeb;
padding: 8px;
display:none;
}
.footer #commentText {
width: calc(100% - 100px);
height: 26px;
outline: none;
font-size: 14px;
text-indent: 10px;
position: absolute;
background-color: transparent;
border: 0;
border-bottom: 1px #1bac19 solid;
resize: none;
overflow:hidden;
bottom: 8px;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.footer span {
display: inline-block;
width: 46px;
height: 34px;
line-height: 35px;
cursor: pointer;
text-align: center;
/* position: absolute;
right: 10px; */
border-radius: 6px;
margin-right: 17px;
float: right;
border: 1px #dcdcdc solid;
font-size: 14px;
}
.sendTo{
background: #1bac19;
color: white;
}
.sendNoTo{
background: #ebebeb;
color: #d5d5d5;
}