微信公众号开发，weUi组件，问题总结

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;
}  

转载于:https://www.cnblogs.com/gavinlib/p/8619407.html