上传图片，预览图片：
<!--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;
}
ajax 上拉加载，实现方法
<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;
}
时间： 2024-10-20 18:13:37