第一次打开页面时，总刷不内容，下拉也没有反应。

yanhyp

第一次打开页面时，总刷不内容，下拉也没有反应。这个大家遇到过吗，谁能帮忙解决一下
如图

能不能让应用没内容时也自动刷新啊。

jack888

代码问题。

yanhyp

jack888 发表于 2015-1-30 14:14
代码问题。

apiready = function()
{
      $api.setStorage('bottomTabBarLock','shown');
      window.header = $api.byId('header');
      var headerPos = $api.offset(header);
      window.main = $api.byId('main');
      var mainPos = $api.offset(main);
      groupColor = '#FFFFFF';//定义颜色内容
      api.openFrameGroup({
         name: 'toutiao-group',
         background: groupColor,
         scrollEnabled: true,
         rect: {
            x: 0,
            y: headerPos.h,
            w: 'auto',
            h: mainPos.h
         },
         index: 0,
         frames:[
            {
                  name: 're-bang',//全部信息
                  url: './html/re-bang.html',
                  pageParam:{},
                  bounces:true,
                  opaque:true,
                  bgColor: groupColor
            }, {
                  name: 'qu-tu',//趣图
                  url: './html/qu-tu.html',
                  pageParam:{},
                  bounces:true,
                  opaque:true,
                  bgColor: groupColor
            },{
                  name: 'shi-ping',//视频
                  url: './html/shi-ping.html',
                  pageParam:{},
                  bounces:true,
                  opaque:true,
                  bgColor: groupColor
            },{
                  name: 'duan-zi',//段子
                  url: './html/duan-zi.html',
                  pageParam:{},
                  bounces:true,
                  opaque:true,
                  bgColor: groupColor
            },{

                  name: 'la-we',//宅文
                  url: './html/la-we.html',
                  pageParam:{},
                  bounces:true,
                  opaque:true,
                  bgColor: groupColor
            }
         ]
      }, function(ret, err){
         var name = ret.name;
         var index = ret.index;
         changeBar(index);
      });
      这是切换页面的代码？这样写有是吗问题？

yanhyp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<link href="../css/hot_list.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/dot.min.js" type="text/javascript"></script>
<script src="../script/bindSwipe.js" type="text/javascript"></script>
<script src="../script/dot.min.js" type="text/javascript"></script>
  <title>全部</title>
</head>
<body>
<div id="main"></div> <div id="endbottom"></div>
  <script type="text/template" charset="utf-8" id="Bindjson">
   {{
   if( it && it.length>0 ){
   }}

   {{
      for(var i=0; i<it.length; i++){
      if(it[i].atype==3){
   }}

<div class ="matter">
<div class="dcontent clearfix">
   <p class="dsummary" onclick="">{{=it[i].acont}}</p>
   <p class="douttime outtime" onclick="">{{=it[i].atime}} 发布一条段子</p>
   </div>

   <div class="endpli">
   <div class="interactive-bar clearfix">
   <div class="endpli">
   <div class="interactive-bar clearfix">
   <div class="endpli-end">
   <div class="endpli-eleft"><img src="../image/fx.png" alt="分享" />分享</div>
   <div class="endpli-righ onyes"><img src="../image/dingtop.png" alt="棒！" />棒！</div>
   <div class="endpli-righ "><img src="../image/comment.png"  alt="评论" />评论 </div>
   </div>
      </div>
      </div>
         </div>
         </div>
      </div>


{{
} else if (it[i].atype==2||it[i].atype==5){
}}


<div class ="matter">
   <div class="content clearfix">
   <div class="qu-img" onclick="">
   <p class="summary">{{=it[i].aname}}</p>
   <p class="summary outtime">{{=it[i].atime}} 发布了一则趣图</p>
   </div>
   <div class="qu-img" onclick=""><img src="http://dev**.**/{{=it[i].acode}}" alt="{{=it[i].aname}}" />
   </div><div class="endpli"><div class="interactive-bar clearfix">
      <div class="endpli">
      <div class="interactive-bar clearfix">
      <div class="endpli-end">  <div class="endpli-eleft"> <img src="../image/fx.png" alt="分享" />分享
      </div><div class="endpli-righ onyes">  <img src="../image/dingtop.png" alt="棒！" />棒！</div>
      <div class="endpli-righ ">  <img src="../image/comment.png" alt="评论" />评论</div></div></div>
         </div> </div></div></div></div>


{{
} else if (it[i].atype==1){
}}

<div class ="matter">
<div class="content clearfix">
<p class="summary" onclick=""> {{=it[i].aname}}</p>
<p class="summary outtime" onclick="">{{=it[i].atime}}发布了一则视频</p></div>
  <div  class="mvideo"><div class="mvdeoimg"onclick="OpenSpShow({{=it[i].aid}},{{=it[i].isurl}},'{{=it[i].alink}}',{{=it[i].atype}})"><div  class="mvdeoimgtow"><img src="../icon/bigplay.fw.png" width="50px" height="50px" alt="背景图" /></div><img src="http://dev**.**/{{=it[i].apic}}" width="76px" height="76px" /></div>
<h3 class="mvtitle" onclick="OpenSpShow({{=it[i].aid}},{{=it[i].isurl}},'{{=it[i].alink}}',{{=it[i].atype}})">{{=it[i].aname}}</h3>
</div>
<div class="endpli"><div class="interactive-bar clearfix">
<div class="endpli"><div class="interactive-bar clearfix">
<div class="endpli-end"><div class="endpli-eleft"><img src="../image/fx.png" />分享</div>
<div class="endpli-righ onyes"><img src="../image/dingtop.png" />棒！</div>
         <div class="endpli-righ "><img src="../image/comment.png" />评论</div></div></div></div>
</div> </div> </div>


{{
}else if (it[i].atype==4){
}}
  
<div class ="matter">
<div class="content clearfix">
<p class="summary" onclick=""> {{=it[i].aname}}</p>
<p class="summary outtime" onclick="">{{=it[i].atime}}发布了一则宅文</p>
</div>
<div  class="mvideo" onclick="OpenSpShow({{=it[i].aid}},{{=it[i].isurl}},'{{=it[i].alink}}',{{=it[i].atype}})">

<div class="mvdeoimg" ><img src="http://dev**.**/{{=it[i].apic}}" /></div>
<h3 class="mvtitle">{{=it[i].aname}}</h3>
</div>

<div class="endpli">
<div class="interactive-bar clearfix">
<div class="endpli">
<div class="interactive-bar clearfix">
<div class="endpli-end">
<div class="endpli-eleft">
<img src="../image/fx.png" />分享
</div>
<div class="endpli-righ onyes">
<img src="../image/dingtop.png" />棒！</div>
<div class="endpli-righ ">
<img src="../image/comment.png" />评论
</div>
</div>
</div>

</div>

</div>

</div>

</div>


{{

         }
   }}

{{
                  }
                  }
                  }}
                  </script>

<script type="text/javascript">
apiready = function () {

      var AId = 1; //定义其实加载数据信息内容
      var url = 're-bang';
      Bindjson(AId, 'down', url); //第一次也没进行数据加载
      api.addEventListener  //上拉底部动态数据加载
({
      name: 'scrolltobottom'
}, function (ret, err) {

      //  getData(); //加载提示信息方法
      shown(); //加载提示信息方法
      AId = AId + 1;
      Bindjson(AId, 'down', url);
});

      //顶部下拉刷新页面
      api.setRefreshHeaderInfo({
         visible: true,
         loadingImgae: 'wgt://image/refresh-white.png',
         bgColor: '#f2f2f2',
         textColor: '#4d4d4d',
         textDown: '下拉刷新...',
         textUp: '松开刷新...',
         showTime: true
      }, function (ret, err) {
         AId = 1;
         Bindjson(AId, 'upper', url)
         api.refreshHeaderLoadDone();

      });
}

//动态读取后台接口数据
function Bindjson(Page, state, Aurl) {
      api.ajax({
         url: 'http://url/' + Aurl + '.php',
         method:'post',
         cache:true,
         timeout: 30,
         dataType: 'text',
         returnAll: false,
         data:{
                  values: { aid: Page }
               }
      }, function (ret, err) {
         if (ret) {
            var urlJson = eval('(' + ret + ')');
            var job = urlJson;
            var template = document.getElementById('Bindjson').innerHTML;
            if (state == 'upper') {
                  document.getElementById('main').innerHTML = doT.template(template)(urlJson);
                  api.refreshHeaderLoadDone(); //刷新页面关闭
            } else {
                  document.getElementById('main').innerHTML += doT.template(template)(urlJson);
                  // api.hideProgress(); //加载页面关闭
                  hdieend(); //加载页面关闭方法
            }
         } else {
            api.alert({
                  title: '系统提示',
                  msg: '请您检查您的网络设置！',
                  buttons: ['确定']
            });

         };
      });
}

function hdieend() {

      document.getElementById('endbottom').innerHTML = "";
}
function shown() {

      document.getElementById('endbottom').innerHTML = "加载数据中.....";
}

//定义数据加载内容提示框
function getData() {
      api.showProgress({
         title: '加载中...',
         modal: false
      });
}

//绑定轻划调出隐藏底部按钮组
var showBottomTabBar = function () {
      if ($api.getStorage('footer') == 'hidden') {
         $api.setStorage('footer', 'shown');
         //       api.execScript({
         //          name: 'root',
         //          script: 'Bothidden(0);'
         //       });

         //       api.setFrameAttr({
         //          name: 'toutiao-bottom',
         //          hidden: false
         //       });
      } else {
      }
};

// 解绑定轻划调出隐藏底部按钮组
var hideBottomTabBar = function () {
      if ($api.getStorage('footer') == 'shown') {
         $api.setStorage('footer', 'hidden');
         //       api.execScript({
         //          name: 'root',
         //          script: 'Bothidden(1)'
         //       });

         //       api.setFrameAttr({
         //          name: 'toutiao-bottom',
         //          hidden: true
         //       });
      } else {
      }
};
window.bindSwipe = new BindSwipe(document, {
      // dir: 'y',
      swipeUpFn: function () {
         hideBottomTabBar()
      },
      swipeDownFn: function () {
         showBottomTabBar()
      }
});

</script>
</body>
</html>

yanhyp

[img][/img]

yanhyp

以上是代码，以下是图片，问题就是加载不出来。

yanhyp

yanhyp 发表于 2015-2-3 14:29
以上是代码，以下是图片，问题就是加载不出来。

有时候可以加载起来，有时候加载不出来。
经过测试上面红色标注信息内容。

yanhyp

已上问题已经解决，官方提供的 api.openFrameGroup这个有一个bug，每次打开时候，都会预加载页面，当页面没有加载完成之前，直接侧滑，加载的页面apiready 是不执行的。所以会出现以上的空白页。解决方法在加载页面body标签里面加一个 onload="apiready()"这个事件就额可以解决这个问题了！

yanhyp

yanhyp 发表于 2015-2-3 16:26
已上问题已经解决，官方提供的 api.openFrameGroup这个有一个bug，每次打开时候，都会预加载页面，当页面没 ...

这是官方的一个bug，希望官网能够解决这个bug！