堪培拉的风
堪培拉的风
  • 发布:2015-01-22 16:01
  • 更新:2015-01-22 17:29
  • 阅读:10897

webview模式子页面数据加载问题

分类:MUI

我的设计是 用mui做的登录界面,点击登录进来是首页,但是首页的构成是 上半部分是滚动图片 下面是表格展示数据的,问题是 每次点登录进来,首先要出来表格 然后过好一会才出现图片,因为要加载图片比较慢。还有表格出来了,数据等一会才加载出来。这个怎么解决
ps:我的表格数据是从数据库取出来的,用的模式是webview选项卡模式。还有这个webview选项卡模式,其他的子页面上的数据,在我点击登录的时候,都同时加载子页面的方法,怎么做才能做到我点击登录的时候只加载首页的数据,点击选项卡按钮的时候才加载相应页面的数据 在线急等!!!

2015-01-22 16:01 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

1.页面内数据加载导致页面显示慢的问题,你可以自己在页面初始化的时候,显示一个loading。等你取完数据之后,再关闭loading。

2.webview选项卡的加载问题,你在创建的时候可以先传入一个空字符串作为url。等你第一次点击的时候,在用这个webview.loadURL来加载具体的页面。

  • 堪培拉的风 (作者)

    非常感谢,我试试!


    2015-01-22 16:27

  • 全栈工程师

    <nav class="mui-bar mui-bar-tab">  
    <a id="defaultTab" class="mui-tab-item mui-active" href="#Popover_2">
    <span class="mui-icon sdrb"></span>
    <span class="mui-tab-label">水情信息</span>
    </a>
    <a class="mui-tab-item" href="fd/fd_reportforms.html">
    <span class="mui-icon sqxx"></span>
    <span class="mui-tab-label">发电信息</span>
    </a>
    <a class="mui-tab-item" href="gd/gd-main.html">
    <span class="mui-icon fdxx"></span>
    <span class="mui-tab-label">供电信息</span>
    </a>
    <a class="mui-tab-item" href="gs/gs-main.html">
    <span class="mui-icon zoom"></span>
    <span class="mui-tab-label">供水信息</span>
    </a>
    </nav>
    <div id="Popover_2" class="mui-popover mui-bar-popover">
    <div class="mui-popover-arrow"></div>
    <ul class="mui-table-view">
    <li class="mui-table-view-cell sqbg"><a href="sq/sq-info.html">水情报表</a>
    </li>
    <li class="mui-table-view-cell sqtx"><a href="sq/sq-chart.html">水情图表</a>
    </li>
    </ul>
    </div>
    <script type="text/javascript" charset="utf-8">
    var sy = document.getElementById("bz");
    var subpages = ['main.html','gs/gs-main.html', 'fd/fd_reportforms.html', 'gd/gd-main.html','sq/sq-info.html','sq/sq-chart.html'];
    var subpage_style = {
    top: '46px',
    bottom: '50px'
    };
    //创建子页面,首个选项卡页面显示,其它均隐藏;
    mui.plusReady(function() {
    var self = plus.webview.currentWebview();
    for (var i = 0; i < 6; i++) {
    var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
    if (i > 0) {
    sub.hide();
    }
    self.append(sub);
    }
    //登录进来后 将左边导航栏清空
    sy.className = "";
    });

    //当前激活选项
    var activeTab = subpages[0];
    var title = document.getElementById("title");
    //选项卡点击事件
    mui('.mui-bar-tab').on('tap', 'a', function(e) {
    var targetTab = this.getAttribute('href');
    if (targetTab == activeTab) {
    return;
    }
    //更换标题
    title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
    //显示目标选项卡
    plus.webview.show(targetTab);
    //隐藏当前;
    plus.webview.hide(activeTab);
    //更改当前活跃的选项卡
    activeTab = targetTab;
    });

    以上是webview选项卡模式,在登录进来的时候,只加载'main.html页面,当我点击其他选项卡按键链接的时候才加载相应的页面,比如 gs/gs-main.html 这个页面,当我点击“供水信息”信息的时候才加载这个页面?? 怎么解决????


    2015-01-22 17:03

  • 周羊羊

    你好,我想问一下,首次加载的loading页应该在哪里设置?


    2016-04-01 13:40

  • alex_zuo

    可以!!


    2016-04-25 14:05

全栈工程师

全栈工程师 - 精通mui、uniapp,承接相关项目外包,解决各种疑难问题。有任何问题可以随时联系,QQ:419761282

<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="#Popover_2">
<span class="mui-icon sdrb"></span>
<span class="mui-tab-label">水情信息</span>
</a>
<a class="mui-tab-item" href="fd/fd_reportforms.html">
<span class="mui-icon sqxx"></span>
<span class="mui-tab-label">发电信息</span>
</a>
<a class="mui-tab-item" href="gd/gd-main.html">
<span class="mui-icon fdxx"></span>
<span class="mui-tab-label">供电信息</span>
</a>
<a class="mui-tab-item" href="gs/gs-main.html">
<span class="mui-icon zoom"></span>
<span class="mui-tab-label">供水信息</span>
</a>
</nav>
<div id="Popover_2" class="mui-popover mui-bar-popover">
<div class="mui-popover-arrow"></div>
<ul class="mui-table-view">
<li class="mui-table-view-cell sqbg"><a href="sq/sq-info.html">水情报表</a>
</li>
<li class="mui-table-view-cell sqtx"><a href="sq/sq-chart.html">水情图表</a>
</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
var sy = document.getElementById("bz");
var subpages = ['main.html','gs/gs-main.html', 'fd/fd_reportforms.html', 'gd/gd-main.html','sq/sq-info.html','sq/sq-chart.html'];
var subpage_style = {
top: '46px',
bottom: '50px'
};
//创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for (var i = 0; i < 6; i++) {
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if (i > 0) {
sub.hide();
}
self.append(sub);
}
//登录进来后 将左边导航栏清空
sy.className = "";
});

		 //当前激活选项  
		var activeTab = subpages[0];  
		var title = document.getElementById("title");  
		 //选项卡点击事件  
		mui('.mui-bar-tab').on('tap', 'a', function(e) {  
			var targetTab = this.getAttribute('href');  
			if (targetTab == activeTab) {  
				return;  
			}  
			//更换标题  
			title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
			//显示目标选项卡  
			plus.webview.show(targetTab);  
			//隐藏当前;  
			plus.webview.hide(activeTab);  
			//更改当前活跃的选项卡  
			activeTab = targetTab;	  
		});  

以上是webview选项卡模式,在登录进来的时候,只加载'main.html页面,当我点击其他选项卡按键链接的时候才加载相应的页面,比如 gs/gs-main.html 这个页面,当我点击“供水信息”信息的时候才加载这个页面?? 怎么解决????

  • DCloud_UNI_FXY

    已在http://ask.dcloud.net.cn/question/2668回复了


    2015-01-22 17:17

huliu123

huliu123

1.页面内数据加载导致页面显示慢的问题,你可以使用html5的本地缓存方法。一般用户不清缓存下次打开就快了.

2.webview选项卡的加载问题,加点击事件.如onclick='$("#div").load("URL");' ..

该问题目前已经被锁定, 无法添加新回复