Question

我使用Framework7并希望在元素对用户可见时使用jQuery.appear来运行脚本。这在纯HTML中使用此代码非常有用：

    <!DOCTYPE html>
<html>
  <head>
    <title>
    </title>
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>     
    <script src="https://raw.githubusercontent.com/morr/jquery.appear/master/jquery.appear.js" type="text/javascript"></script> 
    <script src="update.js" type="text/javascript"></script> 

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <img align="center" id="UpdateIMG1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Incandescent_light_bulb.svg/200px-Incandescent_light_bulb.svg.png" style="height:10vh">
  </body>
</html>

Update.js

<!-- Update on first start -->
$.force_appear();
$(function() {
    $("[id^='UpdateIMG']").appear();
    $(".page-content").on('appear', "[id^='UpdateIMG']", function(event, $all_appeared_elements) {
        alert("appeared");

    });
    <!--Cancel when element is invisible-->
    $(".page-content").on('disappear', "[id^='UpdateIMG']", function(event, $all_appeared_elements) {
        alert("disappeared");
    });
});

当我将其添加到Framework7（Framework7-1.5.0 \ examples \ inline-pages）时，显示但消失并不。为什么会这样？

https://github.com/nolimits4web/Framework7/archive/v1.5.0.zip

Answer 1

我认为您正在尝试使用默认页面类'page-content'捕获页面的加载和卸载。但是，对于Framework7，这不是一个好习惯。 Framework7提供了许多事件来捕获页面的不同阶段。

以下是根据Framework7文档的页面事件集。

您可以在https://framework7.io/docs/page.html#page-events

上找到有关如何编写函数等的更多详细信息。

Framework7阻止了jQuery.appear

1 个答案: