关于better-scroll这个插件前面已经介绍过两次了 从原生js使用到结合服务端发送数据使用都有过介绍

　　今天给大家分享一下这款插件在react中遇见的坑  总之我真是对这款插件又爱又恨 每次各种bug十足后还不去抛弃他

继续去研究他 真是恨之切，爱之深，典型的受虐狂啊  哈哈  好了废话不多说接下来给大家展示在react遇见的小问题

　　首先我想实现的是一个下拉刷新的小功能，那么我们就得需要数据 在最初始的react中实现我在state中定义了一个空数组

然后在componentDidMount这个生命周期第一次发送ajax请求用来给我的初始值渲染数据，然后请求过来十条数据后发送给了

列表组件渲染上了整个页面，接着我在这个ajax的then方法里面初始化了一个BScroll的实例化用

pullDownRefresh: {
//下拉到一百的位置才会触发
threshold: 100,
//然后松手后返回50的位置
stop: 30,
}
设置了一波初始化条件
　　
　　接着我就不知怎么脑抽的去了componentDidUpdate这个生命周期中去监听了pullingDown 这个事件 终于造成了一个十分尴尬的问题
就是我第二次下拉刷新的时候ajax请求一股脑的给我触发了多次，将所有的数据全部返回了回来，这与我每次下拉触发一次刷新一遍的
初衷大大不同，
 
　　经过各种挣扎后终于和实例化和pullingDown这个事件的监听一起提出来然后放在了componentDidUpdate这个生命周期中就解决了
此时不知道大家有没有疑问   这个函数是挂载阶段的生命周期   按我们所学的知识来说挂载阶段只会执行一次呀 但是为什么这个函数里面
的事件还会执行呢 ，此时用的知识点就是发布订阅了，关于发布订阅请看以后分享~~~
 
 
　　不过在这个题中还运到了另一个问题就是  如果我给元素设置一个自定义属性然后通过伪类选择器的attr将这个伪类选择器展示到页面
上去没有成功   不知道哪位大佬能帮忙解决在react中怎么设置自定义属性然后通过attr展示到页面上去，若能解答不胜感激~~~~
 
 

当better-scroll遇见了react擦出的火花的更多相关文章

  1. React直出实现与原理

    前一篇文章我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出. 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什么值得我们学习的呢? 为什么MVVM不能 ...

  2. 当Spring Cloud Alibaba Sentinel碰上Spring Cloud Sleuth会擦出怎样的火花

    前言 今年主要会做一个比较完整的微服务项目开源出来.目前已经开始了,刚兴趣的先Star一个吧. 项目:https://github.com/yinjihuan/kitty-cloud 基础框架:htt ...

  3. immutability因React官方出镜之使用总结分享！

    作者:首席填坑官∙苏南 公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 引言 之前项目中遇到数据拷贝.引用之间数据层级嵌套过深,拷贝的值 ...

  4. 小程序与WebRTC联姻能擦出怎样的火花？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯视频云终端团队发表于云+社区专栏 腾讯视频云终端技术总监,rexchang(常青), 2008 年毕业加入腾讯,一直从事客户端研发 ...

  5. [置顶] Android 关于BottomDialogSheet 与Layout擦出爱的火花？

    今天上班做那个类似于ios拍照的那种效果图 就是个垂直布局然后里面textview+分割线+textview+button 当然也可以用button+分割线+button 方法有很多,选择适合自己的就 ...

  6. Android 关于BottomDialogSheet 与Layout擦出爱的火花？

    今天上班做那个相似于ios拍照的那种效果图 就是个垂直布局然后里面textview+切割线+textview+button 当然也能够用button+切割线+button 方法有非常多,选择适合自己的 ...

  7. C# WPF 擦出效果，刮图效果

    找了很久 <Window x:Class="TestWebbowser.TestMaskWind" xmlns="http://schemas.microsoft. ...

  8. 当 SQL DELETE 邂逅 Table aliases，会擦出怎样的火花

    开心一刻 晚上,女儿眼噙泪水躺在床上 女儿:你口口声声说爱我,说陪我,却天天想着骗我零花钱,你是我亲爹吗? 我:你想知道真相 女儿:想! 我:那你先给爸爸两百块钱! 环境准备 MySQL 不同版本 利 ...

  9. div的contenteditable和placeholder蹦出的火花

    今天在做手机端发布描述内容时,需要实现换行,还需要有plachholder. 在文本框中换行自然想到了textarea. 问题似乎已经解决了,但是当内容发布后,在html中显示换行都丢失了. 这个时候 ...

随机推荐

  1. laravel-admin列表排序在使用了$grid->model()->latest()后$grid其它加上sortable()可排序的列在排序时不起作用

    laravel-admin这个基于laravel的后台框架,简单易用,$grid的默认排序是主键升序的排列方式,但在使用了`$grid->model()->latest();`自定义默认排 ...

  2. 【模板】矩阵快速幂 洛谷P2233 [HNOI2002]公交车路线

    P2233 [HNOI2002]公交车路线 题目背景 在长沙城新建的环城公路上一共有8个公交站,分别为A.B.C.D.E.F.G.H.公共汽车只能够在相邻的两个公交站之间运行,因此你从某一个公交站到另 ...

  3. R语言可视化--ggplot函数

    上一篇说了qplot函数,现在说一下ggplot函数 本身不能实现,需要添加层才可以.ggplot2的核心函数 library(ggplot2) ggplot(airquality,aes(Wind, ...

  4. IntelliJ IDEA包层级结构显示方式

    在开发的过程中,程序结构增多,通过树状结构看包结构目录,更加舒适. Idea默认情况下是不分层级展示包结构的 点击设置标志按钮,如下图所示 去掉Hide Empty Middle Packages的勾 ...

  5. 浅谈mybatis中#{}和${}的区别

    #{}:表示占位符,如果获取简单类型,#{}中可以使用value或其它名称.有效防止sql注入.使用#{}设置参数无需考虑参数的类型. 如果使用#{}比较日期字段,select* from table ...

  6. selenium 常见问题之 nknown error: call function result missing ‘value’

    运行时候出现错误提示如下: 出现该问题原因:chrome浏览器自动升级.导致和chromedriver支持的版本不匹配. 解决方案有两种(本人采用的是第一种方式解决办法.): 1.下载和当前使用的ch ...

  7. 写论文，没数据？R语言抓取网页大数据

    写论文,没数据?R语言抓取网页大数据 纵观国内外,大数据的市场发展迅猛,政府的扶持也达到了空前的力度,甚至将大数据纳入发展战略.如此形势为社会各界提供了很多机遇和挑战,而我们作为卫生(医学)统计领域的 ...

  8. Html5之localStorage和sessionStorage缓存

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. IDEA maven项目查自动查看依赖关系，解决包冲突问题

    在maven项目中找到pom.xml,打开. <dependencies> <dependency> <groupId>org.apache.storm</g ...

  10. jsp里更新Clob类型字段数据

    ResultSet rs = null; Connection conn = new dbconn().getconnect(); Statement stmt = null; int news=0; ...