1

cordovaで作ったAndroidアプリです。フォームには複数の選択ボックスがあります。選択ボックスをタップすると、オプションがネイティブ Android スタイルで表示されますが、ちらつきます。オプションを選択すると、オプションが消え、オプション ボックスのテキストが更新されません。何も選択されていません。2回目の試行で機能します。

選択ボックスからオプションを選択しようとする 1 秒ごとの試行は、期待どおりに機能します。興味深いことに、同じ選択ボックスである必要はありません。任意の選択ボックスで 2 回おきに試行するだけで、オプションを選択できます。

jquery モバイル 1.4.5 および jquery 2.2.3 を使用します。jquery mobile 1.3.2 で正常に動作します

編集1

アンドロイド 6.0.1

ページが読み込まれると、選択ボックスごとに関数が実行され、オプションが入力されます。

function populateLocationOptions() {
  $("#addLocation option").each(function() {
    if ($(this).val() != 'Option') {
      $(this).remove();
    }   
  }); 

  var locations = getLocationArray();

  for (var i = 0; i < locations.length; i++) {
    sLocationOption = "<option value=\"" + locations[i].id + "\">" + locations[i].name + "</option>";
    $("#addLocation").append(sLocationOption);    
  } 
  $("#addLocation").selectmenu('refresh', true);
}

選択ボックスが定義されている HTML 部分:

<label for="addLocation" class="select"></label>
<select name="Location" id="addLocation" data-theme="c" >
  <option value="Option" data-i18n="addpage.location">Select Location</option>
</select>

編集2

Android 5.1.1 で正常に動作します

編集3

Android 6.0.1 および cordova 6.0.0 で問題を再現するための最小限の例。でindex.html作ったバニラボイラープレートからですcordova create

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"/>
<script src="js/jquery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>

<title>Hello World</title>
</head>
<body>
<div data-role="page" id="add">
  <div data-role="header">
    <h1 id="addPageHeader" data-i18n="addpage.header">Flicker example</h1>
  </div>
  <div data-role="content">
    <select name="Time" id="selectTime" data-theme="c">
      <option value="Option">city</option>
      <option value="Option">Paris</option>
      <option value="Option">New york</option>
      <option value="Option">London</option>
      <option value="Option">Madrid</option>
    </select>
  </div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-id="footer">
    <div data-role="navbar">
      <ul>
        <li><a href="#diary" data-transition="none" data-icon="bars">List</a></li>
        <li><a href="#add" data-transition="none" data-icon="plus">Add</a></li>
        <li><a href="#settings" data-transition="none" data-icon="gear">Settings</a></li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

驚くべきことに、divdata-position="fixed"から属性を削除すると、この問題はなくなります。footer

4

2 に答える 2

0

を使用してこの問題を解決することはできませんでしたdata-position="fixed"。属性を削除し、カスタム css を使用して同じ効果を実現しました。これは、jquery モバイルがdata-position属性をサポートする前に使用された微調整されたソリューションです。以下にリストされている css ファイルは、jquery mobile css の後にロードされます。

body,
.ui-page {
      min-height: 100% !important;
          height: auto !important;
        }
.ui-content
{
  margin-bottom: 56px; /* footer size */
}

.ui-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

私の直感では、これは jquery mobile が Android 6.x の webview で正しく動作していないということです。

于 2016-04-24T18:25:53.910 に答える