最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛。个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较晦涩的。(个人看法)

微信端展示公司订单,采用了滚动加载而没有用分页,觉得一般移动端分页的处理比较少。当然,条件搜索才是满足用户精准查找的核心,无论是分页还是滚动加载都只是给用户一个大致浏览的处理。

顺便说说注意的一点,jquery-weui这个文件引入的位置应该在jq文件之后,这样才能在Jq的基础上识别出封装的一系列JS操作的函数。

如果是有以上报错,说明你可能没有引入jquery-weui文件,或者文件位置放错了,导致识别不了滚动加载初始化的函数。

当写到某个页面的时候,按照以往套路,滚动事件竟然一直触发不了。

一段段代码注释才发现,是select标签搞的鬼。

dataList是vue中data,vm.dataList = STATUS_LIST;

select中的option是v-for循环生成的,但是我的v-for对象是vue实例中的data中的一个数组,只是把全局对象的status_list转了一下给了vue的data而已。如果是直接v-for 全局中的这个个变量status_list的话,那么就能够触发滚动加载事件。

总结:直接调用全局对象来v-for循环就好,没必要转一手给vue.data

思考:想了很久,网上也没找到类似的问题,个人觉得是vue生命周期和jq操作dom时间点的差异导致无法计算出scrollTop,致使无法触发滚动条滚动到底部触发滚动加载事件。具体细节原来也不是很明白。

在此记录一下这个bug,希望路过的大神能一起交流探讨。

记录JQ-WEUI中滚动加载的一个BUG的更多相关文章

  1. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  2. weui实现滚动加载的效果

    weui是微信公司提供的一个UI框架,在H5开发中一些组件可以直接使用.weui文档地址:http://www.jqweui.cn/components 使用weui,需要引入weui.css和jqu ...

  3. jquery weui ajax滚动加载更多

    手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...

  4. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  5. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  6. js 滚动加载iframe框中内容

    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...

  7. HTML5商城开发一 楼层滚动加载数据

    对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...

  8. 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  9. iOS App中数据加载的6种方式

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

随机推荐

  1. springboot 简单自定义starter - dubbo

    首先需要引入pom 这里使用nacos注册中心 所以引入了nacos-client 使用zookeeper注册中心的话需要引入其相应的client <dependency> <gro ...

  2. ios 检测是否安装微信异常

    解决方法 在info.plist 添加LSApplicationQueriesSchemes 类型是Array weixin wechat

  3. sql 查找重复数据,并且重复数据有子集

    SELECT A.* FROM comm_department A INNER JOIN ( select path,count(*) as count from comm_department gr ...

  4. Java 中常用的数据源

    数据源:存储了所有建立数据库连接的信息.就象通过指定文件名你可以在文件系统中找到文件一样,通过提供正确的数据源名称,你可以找到相应的数据库连接. 1.JNDI方式创建DataSource 1.1 配置 ...

  5. jcmd jmap应用:一个String经典笔试题的验证

    笔试题: String strA = new String("123123");这一行中创建了几个String对象?? public class StringHeapCountTe ...

  6. SQL Server 查看分区表(partition table)的分区范围(partition range)

    https://www.cnblogs.com/chuncn/archive/2009/02/20/1395165.html SQL Server 2005 的分区表(partition table) ...

  7. ubuntu操作技巧

    1打开终端:ctrl+alt 2退出crtl+d

  8. 【练习笔记】spring 配置Schedule

    spring项目一些简单的定时任务可以通过@Schedule注解来实现,具体配置如下 在applicationContext.xml文件中增加配置 1.引入task约束 xmlns:task=&quo ...

  9. spring的工厂方法

    http://blog.csdn.net/nvd11/article/details/51542360

  10. Laravel事件监听器listener与事件订阅者Subscriber的区别

    其实就一句话: Each event can have multiple listeners, but a listener can't listen to more than a single ev ...