mui 常见的效果

<!--upload-->
<div id="feedback" class="mui-page feedback">
     <div class="mui-page-content">
          <div id=‘image-list‘ class="row image-list">
                <div class="image-item space">
                     <div class="image-close">X</div>
                      <input type="file" accept="image/*" id="image-1">
                </div>
           </div>
      </div>
</div>

<!--js-->
              function uploadData() {
                     var box = jQuery(‘#image-list‘);
                     var content = jQuery(‘.mui-page-content‘);
                     var feedback = jQuery(‘#feedback‘);
                     var filesHtml = [];
                     jQuery(‘#image-list‘).on(‘change‘, function(e) {
                           // 获取图片资源
                           var file = e.target.files[0];
                           
                           // 用formdata上传文件
                           var fd = new FormData();
                           // 填入文件，可以作为上传的参数
                           fd.append(‘file‘, file, file.name);
                           // 成功后显示文件预览
                           var reader = new FileReader();
                           // 读取文件
                           reader.readAsDataURL(file);
                           //渲染文件
                           reader.onload = function() {
                                var closeBtn = "X";
                                //处理 android 4.1 兼容问题
                                var base64 = reader.result.split(‘,‘)[1];
                                var dataUrl = ‘data:image/png;base64,‘ + base64;
                                var img = ‘<div class="image-item" style="background: url(‘ + dataUrl + ‘) no-repeat;background-size: contain;background-size: 100% 100%;"></div>‘;
                                var html = jQuery.parseHTML(img);
                                jQuery(‘#image-list‘).prepend(html);
                                
                                //添加closebtn
                                jQuery(‘.image-item‘).append(closeBtn);
                           }
                           //选择的全部图片
                           filesHtml.push(file);
                           return filesHtml;
                     })
                }

.feedback .image-list {
           width: 100%;
           height: 85px;
           background-size: cover;
           padding: 10px 10px;
           overflow: hidden;
     }

     .feedback .image-item {
           width: 65px;
           height: 65px;
           background-image: url(../images/iconfont-tianjia.png);
           background-size: 100% 100%;
           display: inline-block;
           position: relative;
           border-radius: 5px;
           margin-right: 10px;
           margin-bottom: 10px;
           border: solid 1px #e8e8e8;
     }

     .feedback .image-item input[type="file"] {
           position: absolute;
           left: 0px;
           top: 0px;
           width: 100%;
           height: 100%;
           opacity: 0;
           cursor: pointer;
           z-index: 0;
     }

     .feedback .image-item.space {
           border: none;
     }

     .feedback .image-item .image-close {
           position: absolute;
           display: inline-block;
           right: -6px;
           top: -6px;
           width: 20px;
           height: 20px;
           text-align: center;
           line-height: 20px;
           border-radius: 12px;
           background-color: #FF5053;
           color: #f3f3f3;
           border: solid 1px #FF5053;
           font-size: 9px;
           font-weight: 200;
           z-index: 10;
     }

     .feedback .image-item.space .image-close {
           display: none;
     }
     .image-close {
           position: relative;
           top: -85px;
           left: 51px;
           width: 20px;
           height: 20px;
           border-radius: 50%;
           background: #f10b0b;
           color: #fff;
           text-align: center;
           font-size: 14px;
           cursor: pointer;
     }

<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
         <!--数据列表-->
            <ul id="biometricList" class="mui-table-view mui-table-view-chevron js-view"></ul>
     </div>
</div>

mui.init({
        pullRefresh: {
           container:‘#pullrefresh‘,
                up: {
                     height:50,
                     contentrefresh: ‘正在加载...‘,
                     contentnomore:‘没有更多数据了‘,
                     callback: pullupRefresh
                }
        }
});
mui(‘.mui-scroll-wrapper‘).scroll();

function pullupRefresh(){
 upLoad();
}

数据逻辑：
var count = 0;
var size = 10;

      function upLoad(){
            setTimeout(function(){
                  /*第一次加载时取得所有的li*/
            var table = jQuery(‘.mui-table-view‘);
              var cells = table.find(‘.mui-table-view-cell‘);
            var url = MyAnviz.baseUrl + ‘/product/ajax/productlist.html‘;

            mui.ajax({
               type: "GET",
               url: url,
               data: {
                   "userId": "1",
                   "page": count,
                   "size": size
               },
               dataType: "json",
               success: function (data) {
                  console.log(‘data‘ + data.data);
                  var pageCount = data.pageCount;
                  var pageNum = data.page;
                  var pageSize = Math.floor(pageCount / pageNum);//没什么用
                  mui(‘#pullrefresh‘).pullRefresh().endPullupToRefresh((++count > pageCount ));//参数为true代表没有更多数据了。如果，当前请求page(count)大于总的页面，则是没有数据了，小于，则是有数据的


                  console.log(‘当前的请求页数为:‘ + count);

                   for (var i = 0; i < data.data.length; i++) {
                        var item = data.data[i];
                         if(item){
                            var p_id = item.contentId;
                            var p_img = item.productorImg;
                            var p_name = item.productorName;
                            var p_des = item.productorDes;
                            var p_url = item.productorUrl;
                    }

                    /*新的 数组列表*/
                    var li = jQuery(‘<li class="mui-table-view-cell mui-media js-media" data-id="‘ + p_id + ‘">‘ + ‘<img class="mui-media-object mui-pull-left js-img" src="‘ + p_img + ‘" /><div class="mui-media-body js-media-body">‘ + p_name + ‘</div>‘ + ‘<div class="anviz-ellipsis js-des js-info">‘ + p_des + ‘</div></li>‘);
                    /*改变cells的length*/
                    console.log(‘新的li为：‘ + li.length);

                    /*新的li数组添加到第一次加载的10条li的后面*/
                    cells.push(li[0]);
                    console.log(‘新的li数量‘ + cells.length);
                     table.append(cells);
                }
             }
       });
    },1500)
}
if (mui.os.plus) {
        mui.plusReady(function() {
            setTimeout(function() {
                mui(‘#pullrefresh‘).pullRefresh().pullupLoading();
            }, 1000);

        });
} else {
        mui.ready(function() {
            mui(‘#pullrefresh‘).pullRefresh().pullupLoading();
        });
}

mui(‘.mui-scroll-wrapper‘).scroll();

var curDate = $(‘#selectTime‘).text();

       var title = jQuery(‘#storieslTitle‘).val();
       var curDate = getDate();
       var curStoriesl = jQuery(‘#storieslText‘).val();
       
       if(!title){
              mui.toast(‘The title cannot be empty!‘);
              return false;
       }
       if(!curDate){
              mui.toast(‘The date cannot be empty!‘);
              return false;
       }
       if(!curStoriesl){
              mui.toast(‘description cannot be empty!‘);
              return false;
       }