jquery.mobile_html/css_WEB-ITnose の折りたたみセットの折りたたみリストビューでよくあるレイアウトの問題

最近のプロジェクトでは、jquery.mobile を使用して携帯電話上に単純な表示を作成しました。私はこのフレームワークについては以前から知っていただけで、実際に遊んだことはありませんでした。

特にイベントバインディングに関しては、デスクトップシステムに比べて、ブラウザを使用すると手間が多く、うまくいきません。

以下の図に示すように、バックエンド システムで作業する場合、左側には通常、展開したり折りたたんだりできるモジュールと下位のメニュー項目が表示されます。

私の問題は、累積評価に引っかかっています。 ページを再利用するために、コメント表示用の累積評価に iframe が埋め込まれています。

最初の閾値

モバイル WEB 開発を経験した学生は、IOS ブラウザーの iframe にコンテンツが多すぎると、スクロール バーが表示されず、コンテンツが切り取られたように見えることを知っているはずです。

情報を確認してやっと分かりました。結局のところ、携帯電話の画面は小さいので、コメントがたくさんある場合、PCのブラウザのページのようにページ送りボタンを並べるのは不可能です。悪い。

現在では、ローリングローディングが一般的に使用されています。まずデモを作成して、コンピューター上で実行します。携帯電話を変更して、最初はうまくいくと思いました。

iPhone に切り替えてもスクロールバーの問題は解決しただけですが、スクロールの読み込みはまだ残っています。何度もスワイプしても反応がなく、心が冷たくなりました。ここで奇妙なことについて話したいのですが、QQ と WeChat では許可されています。それは本当に奇妙なことです。

このまま無駄なことを続けていても結果は出ないので、別の方法を探しましょう。最初に考えたのは、これを別のページで行うことでした。そこで私たちは 2 番目の閾値に遭遇しました。

<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">                    <ul data-role="listview">                        <li><a id="pjList" href="xxx" class="ui-btn-text"  >累计评价</a></li>                    </ul>                </div>

上記は累積評価部分に相当します。クリック後、ページのスタイルが完全に乱れ、js イベントが実行されません。 f12でコードを見ると、bodyのhtml要素、headの部分、ページ下部のjs以外は全て消えています。

そんなにバカなことするの？同僚にそのような問題が発生したかどうかを尋ねたところ、rel="external" を追加すれば大丈夫だと言われましたが、実際には機能しませんでした。コードは次のようになりました:

<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">                    <ul data-role="listview">                        <li><a id="pjList" href="xxx" class="ui-btn-text" rel="external">累计评价</a></li>                    </ul>                </div>

注: rel='external' は target=''_blank'' に似ており、新しいページで開くことを意味します

3 番目のしきい値については、タイトル 私が遭遇した問題 (頭の写真が最終的な効果です)

折りたたみ可能なリストビュー 2 つのパートナーは相互に互換性がなく、より良いレイアウト効果を得ることができません。いじくり回している間に空の折りたたみ可能なものを追加しました。

やっと集まりました。折りたたみアイコンのデフォルトは + で、リストビュー項目はアイコンを統一するための右矢印です。デフォルトでは、累積評価は上の図のようになりません。

2ce624d7a1e9b4dc4bfdf7a44ecb4124

この問題は解決されました。完全なページは次のとおりです。

                                            
        
            
                
                    
医院介绍
                    
                
                
                    
套餐相关信息
                    
                
                
                    
使用须知
                    
                
                
                    
查看地图
                    
                
                
                
                <div data-role="content" style="border: solid #CCC; border-width: 0 1px;">                    <ul data-role="listview">                        <li><a id="pjList" href="xxx" class="ui-btn-text" rel="external">累计评价</a></li>                    </ul>                </div>