form标签的位置影响jQuery WeUI滚动加载使用的例子

原创 2016年11月23日 14:15:12

最近在做微信开发的时候出现了一个问题,发觉滚动加载不起作用了。由于代码较多。我简化下,原来的代码大致是这样得:

<form id="form1">
<div id="tab2" class="weui_tab_bd_item">
<div class="content">
<div class="weui_cells" data-bind="with:WorkplaceMatchVM">
    。。。
</div>
<div class="weui-infinite-scroll hidden">
    <div class="infinite-preloader"></div>
               正在加载...

    </div>
</div>
</div>
</div>
</form>

相应的js代码:

 $("#tab2").infinite().on("infinite", function () {
                console.info("tab2");
                if (page.loading) return;
                page.loading = true;
                $("#tab2 .weui-infinite-scroll").show();
                setTimeout(function () {
                    console.info(page.pageIndex);
                    GetWorkplaceMatchList();
                    page.loading = false;
                    $("#tab2 .weui-infinite-scroll").hide();
                }, 1000);
            });

但是在js调试console输出中并没有看到tab2,这意味着根本未执行滚动加载事件。原以为是在调用的时候少写了什么代码,但是经过对比后,并未发现与其他页面的滚动加载有什么不同。要说有什么不同的话,也就是多了一个form标签。但这个标签也没引起我的注意,因为实在想不出这个标签会对滚动加载有什么影响。后来由于发现在这个页面发现其他滚动加载不受影响,可以正常执行。而这些滚动加载没有form标签,才引起了我的注意。
于是我调整了form标签的位置,调整后代码这个样子:


<div id="tab2" class="weui_tab_bd_item">
<form id="form1">
<div class="content">
<div class="weui_cells" data-bind="with:WorkplaceMatchVM">
    。。。
</div>
<div class="weui-infinite-scroll hidden">
    <div class="infinite-preloader"></div>
               正在加载...

    </div>
</div>
</div>
</form>
</div>

刷新执行后,没问题了,滚动加载可以正常使用。但是,仍然不能明白这个form标签为什么会影响滚动加载的运行。我查看了jquery-weui.js相关infinite事件定义的相关代码。没有找到与form相关的地方。真是日了狗了。看来JAVASCRIPT的水平还是菜啊。牵涉到底层的代码就分析不出原因了

版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery weui ajax滚动加载更多

手机端使用jquery weui制作ajax滚动加载更多。 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: 滚...
  • ziwoods
  • ziwoods
  • 2017年07月20日 10:18
  • 1939

jquery weui上拉加载更多

上拉加载更多 《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材,已被全世界100多个国家的1200多所大学用作...
  • ziwoods
  • ziwoods
  • 2017年05月16日 18:20
  • 3801

微信小程序入门五上滑加载下拉刷新

之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的。这章介绍加载和刷新。 效果图: 先介绍在IDE中,怎么模拟上滑这个操作。开始我是用鼠标点击文章列表,然后先上移动。结果一直没有结果,以...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

微信UI项目:jQuery WeUI

jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供了如下拉刷新、日历、地址选择器等丰富的拓展组件。jQuery WeUI 中的JS组件均是以JQuery 插...
  • softwave
  • softwave
  • 2016年03月26日 14:26
  • 16489

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

weui loading效果实现

界面 --> ...

jquery weui 实现手机滚动刷新,结合底部tabber

手机微信里页面实现滚动刷新,在底部可以加上导航栏。

jquery weui实现多tab异步滚动加载更多

多tab实现ajax加载更多 选项一 ...
  • ziwoods
  • ziwoods
  • 2017年08月13日 11:13
  • 1106

移动端框架之JQuery WeUI

和JQuery WeUI 配合使用的WeUI,是移动端快速开发的利器。 在初步使用的过程中,发现JQuery WeUI扩展的几个功能特别实用: 1.通知:模仿iOS风格的通知。你可以自定义标题...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:form标签的位置影响jQuery WeUI滚动加载使用的例子
举报原因:
原因补充:

(最多只允许输入30个字)