Question

我正在使用App.js（Javascript UI库）和Zepto.js（类似JQuery的库）来制作移动应用程序。下面的代码不是来自我的应用程序，而是演示了我遇到的确切问题。我尽量保持它尽可能短。点击的图像应在第1页上保持可见，然后再在第2页显示，但现在点击的图像在第1页上消失，这使得向page2的转换看起来很混乱。

单击图像。如果没有任何反应，请转到第2页然后返回第1页并尝试再次单击以查看问题。

非常感谢任何帮助。看来这个问题超出了我的技能：D我的猜测是这与我正在使用的库有关。

App.load('page1');

    App.controller('page1', function(page) {
      $(page).find('img').on('click', function() {

        App.load('page2');
        $('#clicked-img-container').html($(this));

      });
    });
    
    App.controller('page2', function(page) {
      
    });

img {
      width: 150px;
      height: 100px;
    }

<!DOCTYPE html>
<html>

<head>

  <!-- Default stylesheet provided with App.js.
    Contains iOS/Android styles for all included widgets. -->
  <link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">


</head>

<body>

  <!-- Page1 -->
  <div class="app-page" data-page="page1">
    <div class="app-topbar">
      <h1>Page 1</h1>
    </div>
    <div class="app-content">
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Red_squirrel_%28Sciurus_vulgaris%29.jpg">
      <img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Lightmatter_lioness.jpg">
      <div class="app-button" data-target="page2">Go to page 2</div>
      <p>Click the images. If nothing happens, go to page2 and then 
      back to page1 and try clicking again to see the problem I'm experiencing: 
      <strong>The clicked image disappears when clicked which makes the page transition look messy.</strong></p>
    </div>
  </div>

  <!-- Page1 -->
  <div class="app-page" data-page="page2">
    <div class="app-topbar">
      <h1>Page 2</h1>
    </div>
    <div class="app-content">
      <div id="clicked-img-container"></div>
      <div class="app-button" data-target="page1">Go to page 1</div>
    </div>
  </div>

  <!-- jQuery-like library focusing on being lightweight and mobile-friendly -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>

  <!-- core module containing all library functionality -->
  <script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</body>

</html>

Answer 1

单击图像。如果没有任何反应，请转到第2页，然后返回第1页，然后再次尝试点击...

我不熟悉这个框架，但我认为这里的问题是你的代码试图找到元素，以便在它们实际添加到DOM之前添加控制器。我从入门页面下载了示例：http://code.kik.com/app/3/docs.html并注意到有不同的方法，所以我在添加控制器后添加了以下代码：

bash: /usr/bin/rename: Argument list too long

单击时单击的图像会消失，这会使页面过渡看起来很乱。

如果您将图像的克隆添加到DOM中，则会解决此问题：

try {
  App.restore();
} catch (err) {
  App.load('page1');
}

此外，默认转换为$('#clicked-img-container').html($(this).clone());，这可能会使您的案例变得混乱。您可以使用here提供的选项。我添加了fade来向您展示如何。

工作示例如下：

＆＃13;

slide-left

＆＃13;

//App.load('page1');

App.setDefaultTransition('slide-left'); // global

App.controller('page1', function(page) {

  $(page).find('img').on('click', function() {
    
    App.load('page2');
    $('#clicked-img-container').html($(this).clone());

  });
});

App.controller('page2', function(page) {

});

try {
  App.restore();
} catch (err) {
  App.load('page1');
}

＆＃13;

img {
  width: 150px;
  height: 100px;
}

＆＃13;

单击时元素消失

1 个答案: