同样的代码，在ios下运行，下拉加载，滚动条不会滚动，数据也不会加载，在安卓下就正常 。这是产品bug嘛？
<!DOCTYPE html>
<html class="ui-page-login">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>晒单分享</title>
<link href="../../css/mui.css" rel="stylesheet" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/index.css" rel="stylesheet" media="all" />
<link href="../../css/style.css" rel="stylesheet" />
<!--外部加入-->
<link href="../../css/site.css" rel="stylesheet" type="text/css">
<link href="../../css/goods.css" rel="stylesheet" type="text/css" />
<link href="../../css/lottery.css" rel="stylesheet" type="text/css" />
<link href="../../css/comm.css" rel="stylesheet" type="text/css" />
<link href="../../css/cartList.css" rel="stylesheet" type="text/css" />
<link href="../../css/member.css" rel="stylesheet" type="text/css">
<script src="../../js/jquery-2.1.4.min.js"></script>
<script src="../../js/mui.js"></script>
<script src="../../js/config.js"></script>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/tripledes.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/mode-ecb.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/encrypt.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
<style>
html,body,.mui-content {
background-color: #fff;
}
/*头部左右边按钮颜色设置*/
.mui-bar.mui-bar-nav .mui-icon {
color: #6D6D6D;
}
.bt{
margin: 10px;
}
.nt{
margin: 10px;
}
.pRate {
margin-top: 0px;
padding: 10px;
background-color: #F8F8F8;
}
.bd{
margin:10px 0 0 10px;
}
.bd img{
border-radius: 50%;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav mui-navbar">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-icon mui-icon-more mui-pull-right"></a>
<h1 class="mui-title ">晒单分享</h1>
</header>
<div id="sharelist" class="mui-content">
<ul>
<li class="mui-table-view-cell mui-media" style="margin-top:0px ;border-bottom: 1px dashed darkblue;">
<a href="javascript:;">
<div class="mui-media-body">
<h6 id="tshare" style="color: red;">中奖就要放肆晒！拿晒单红包奖上奖哦！</h6>
</div>
</a>
</li>
<li id="share" v-for="item in items" class="share" >
<input type="hidden" id="shareid" value="{{item.shareid}}" />
<div class="" style="width: 100%;">
<div class="bd"style="width: 20%;float: left;">
<img src="../../images/img1.png"/ >
</div>
<div class="" style="width: 75%;float: left;">
<div class="bt">
<div class="mui-media-object mui-pull-right">
<em class="arial">{{item.create_time}}</em>
</div>
<div class="mui-media-body">
<p class='mui-ellipsis'><em class="orange arial">{{item.nickname}}</em></p>
</div>
<!--获奖商品内容-->
<div class="pRate">
<div class="tt">
<h5>{{item.title}}</h5>
</div>
<ul style="list-style: none;">
<li><em class="blue arial">{{item.wintitle}}</em></li>
<li>期号<strong>：</strong> <em class="arial">{{item.winperiods}}</em></li>
<li><p class="mui-ellipsis-2">{{item.content}}</p></li>
<li style="margin-top: 10px;">
<div class="" style="float: left;">
</div>
<!--最多放6张-->
<img src="{{item.filename1}}"/ style="width: 55px;">
<img src="{{item.filename2}}"/ style="width: 55px;">
<img src="{{item.filename3}}"/ style="width: 55px;">
</li>
</ul>
</div>
</div>
</div>
</div></li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var vm;
var totalPage = 1;
var pageNumber = 1;
mui.init({
swipeBack: true,
pullRefresh : {
container: '#sharelist',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
up : {
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback :function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
var _self = this;
if(totalPage < pageNumber){
_self.endPullupToRefresh(true);
}else{
loadShareIndex(function(){
if(totalPage <= pageNumber){
_self.endPullupToRefresh(true);
}else{
_self.endPullupToRefresh(false);
}
sharecontent();
});
}
}
}
}
});
mui.plusReady(function(){
vm = new Vue({
el : '#sharelist',
data : {
items : []
}
});
loadShareIndex(sharecontent);
})
function loadShareIndex(callback){
var params = {
pageNumber : pageNumber++
}
params = aesEncrypt(JSON.stringify(params));
$.ajax({
type:"post",
url:LOCATION+"/app/share/shareIndex",
data : {params:params},
success : function(data){
if(data.sharesize ==0 && data.code == 1){
$('#tshare').html('还没有人晒单噢！快去晒单分享吧！');
$('#share').hide();
}else if(data.code == 1){
var data_arr = [];
Array.prototype.push.apply(data_arr,vm.items);
Array.prototype.push.apply(data_arr,data.sharelist.list);
vm.items = data_arr;
pageNumber = data.pageNumber;
totalPage = data.totalPage;
typeof callback == 'function' ? callback() : '';
}
}
});
}
function sharecontent(){
$('ul #share').on('tap',function(){
var shareid = $(this).children('#shareid').val();
mui.openWindow({
url: '../share/share-detail.html',
extras:{
shareid : shareid
},
waiting: {
title: '正在加载...'
}
})
})
}
</script>
</body>
</html>
2 个回复
DCloud_UNI_FXY
查看hello-mui里的下拉刷新的示例代码。必须保证dom结构一致。
菜鸟先飞
dom 结构不对，这个问题我也遇到过，后来解决了，如有不清楚可联系我
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表区域需要将你需要滑动的区域都放在这个里面-->
</div>
</div>
小汪汪
你好， 我这边的内容也是拖拽或上拉加载不出来，但不是刷新，高度设的是1024（显示的区域），请问有解决办法吗
2016-08-02 15:35
EthanQu
你好，按你说的方法修改了不起作用啊，还是不能下拉，可否私聊请教，qq1303393784
2017-06-03 14:57