問題排查:行動裝置網頁前端 UI 設計
Posted 吉格艾諾
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了問題排查:行動裝置網頁前端 UI 設計 相关的知识,希望对你有一定的参考价值。
這是最近開始接手的一個微信公眾平台專案,
在重整後端程式碼時,因為也需要透過前端來看效果,
所以就因此在前端的部分遇到了不少問題,
畢竟這是以前沒接觸過的領域 (早年的網頁應用程式開發沒有那麼多分工)
經初步探索,得知此案似乎採用了 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="10" /></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、首次打開頁面時,列表區能正常顯示資料,但點擊換頁之後,列表區就換成一個空白頁;若將換頁連結直接複製到瀏覽器上打開,則是列表區和分頁工具中的所有元素均能正常顯示。
以上是关于問題排查:行動裝置網頁前端 UI 設計 的主要内容,如果未能解决你的问题,请参考以下文章
學校 iPad 使用學校google帳號登入Google Drive 提示"裝置政策提醒"的解決方法
問題排查:沒有任何多載符合 System.Timers.ElapsedEventHandler 委派
問題排查:.NETSystem.Runtime.Remoting.RemotingException: TCP 信道协议冲突: 应为报头。