問題排查:行動裝置網頁前端 UI 設計 (1)
2024-10-18 19:31:11
這是最近開始接手的一個微信公眾平台專案,
在重整後端程式碼時,因為也需要透過前端來看效果,
所以就因此在前端的部分遇到了不少問題,
畢竟這是以前沒接觸過的領域 (早年的網頁應用程式開發沒有那麼多分工)
經初步探索,得知此案似乎採用了 jqMobi 做框架 (Intel App Framework 的前身)
大致上看一遍官網的簡介之後,就下載了最新版本 3.0 來玩玩看
然後就拿了一個有資料分頁的來嘗試
這不玩還好,一玩就捅了好幾個馬蜂窩等著我去收拾
頁面結構如下:
<div class="view" id="mainview">
<!--顶部导览-->
<header>
<a id="isback" onclick="history.back(-1);" class="backButton">返回</a>
<h1>單元標題</h1>
<a href="#nb" class="menuButton"></a>
</header>
<!--顶部导览--> <div class="pages">
<!--信息列表-->
<div id="mHistory" class="panel">
<asp:Repeater ID="rptList" runat="server">
<HeaderTemplate>
<ul class="list inset">
</HeaderTemplate>
<ItemTemplate>
<li style="padding:5px 10px 5px 10px">
<h2 style="line-height:30px">欄位一:<font color="#ff0000"><%#Eval("c1") %></font> 欄位二:<font color="#ff0000"><%#Eval("c2") %></font></h2>
<div class="note">
<p>欄位三:<font color="#ff0000"><%#Eval("c3") %> 度量單位</font>
欄位四:<font color="#ff0000"><%#Eval("c4") %> 度量單位</font>
欄位五:<font color="#ff0000"><%#Eval("c5") %> 度量單位</font></p>
<p>欄位六:<font color="#ff0000"><%#Eval("c6") %> 度量單位</font>
欄位七:<font color="#ff0000"><%#Eval("c7","{0:d}") %></font>欄位八:<font color="#ff0000"><%#Eval("c8") %> 度量單位</font></p>
<p><i class="date">欄位九:<font color="#ff0000"><%=DeadlineMessage %></font></i></p>
</div>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
<!--信息列表-->
</div> <!--分页-->
<div class="pages">
<div id="pageNavBar" class="panel">
<div>
<span>本次查询共有 <font color="#ff0000"><%=TotalCount %></font> 笔资料,分页耗时 <font color="#ff0000"><%=Millisecond %></font> 毫秒</span>
</div>
<div class="button-grouped" style="width:100%;">
<a class="button icon paper" href="Maintain_History.aspx?openid=<%=Request("openid") %>&PI=<%=PageFirst %>">首页</a>
<a class="button icon left" href="Maintain_History.aspx?openid=<%=Request("openid") %>&PI=<%=PagePrev %>">上页</a>
<a class="button icon right" href="Maintain_History.aspx?openid=<%=Request("openid") %>&PI=<%=PageNext %>">下页</a>
<a class="button icon paper" href="Maintain_History.aspx?openid=<%=Request("openid") %>&PI=<%=PageLast %>">末页</a>
</div>
<div>
<span>目前在第 <font color="#ff0000"><%=PageIndex %>/<%=PageCount %></font> 页,每页显示 <font color="#ff0000"><asp:Label ID="lbPageSize" runat="server" Text="" /></font> 笔资料</span>
</div>
</div>
</div>
<!--分页--> <!--底部导航-->
<footer>
<a href="/User/Index.aspx?openid=<%=Request("openid") %>" class="icon home" data-ignore="true">返回主页</a>
</footer>
<!--底部导航--> <!-- 左側選單 -->
<ucLeftSlide:LeftSlide ID="ls1" runat="server" />
<!-- 左側選單 -->
</div>
目前待解的問題如下:
1、整個分頁導覽工具都無法顯示
2、不知如何調整第二個 pages 區塊的高度
3、若將分頁工具的 pages、panel 階層定義移除,使其單獨與第一個 pages 和 header、footer 同階層,那麼整個分頁工具區塊就能正常顯示,但點擊換頁之後,分頁工具區塊內應該要變動的部分 (例如:當前頁、分頁耗時),都沒有改變。
4、首次打開頁面時,列表區能正常顯示資料,但點擊換頁之後,列表區就換成一個空白頁;若將換頁連結直接複製到瀏覽器上打開,則是列表區和分頁工具中的所有元素均能正常顯示。
2016/03/15 後記:
經過查找相關資料得知,這種情況通常是頁面切換方式的問題,關鍵之處在於超連結裡的一個屬性:data-ignore="true"。此屬性的作用是讓 App Framework 不對點擊超連結做特別處理。
最新文章
- 在PYTHON3中,使用Asyncio来管理Event loop
- IISExpress配置文件的一个坑
- (转)VS.NET2010水晶报表安装部署[VS2010]
- C/C++技巧
- 使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动
- Error is 10055 由于系统缓冲区空间不足或队列已满,不能执行套接字上的操作
- 循环checked表单 元素
- 201621123043 《Java程序设计》第6周学习总结
- python标准日志模块logging及日志系统设计
- 一个简单的例子了解states
- ETC(电子不停车收费系统)的发展演变
- BZOJ4818 [SDOI2017] 序列计数 【矩阵快速幂】
- Ext.net获取选中行数据
- 论文中“but”与“however”的区别
- BZOJ2654: tree 二分答案+最小生成树
- 前端开发-4-HTML-table&;form&;表单控制 标签
- 使用 Azure CLI 创建 Linux 虚拟机
- iOS - Analyze 静态分析
- 记Spring与跨域
- 【Java基础专题】编码与乱码(05)---GBK与UTF-8之间的转换
热门文章
- Unity3D外包团队——技术分享U3D全景漫游(三)
- shell 脚本定时创建月份表
- OSX 10.11 cocoapods安装命令: sudo gem install -n /usr/local/bin cocoapods
- sql查询当前月内的所有日期
- appium+python:自己写的一个滑动控件的方式
- PL/SQL 查找1-100之间的素数
- C# string类型和byte[]类型相互转换
- 如何为IIS增加svg和woff格式文件的支持
- shell_基础知识
- 加密和ssl机制细节