React组建实现新闻下拉刷新加载

整体布局：

首先需要引入React基础库，dom库，jsx解析库和移动端Jquery库（用于动态请求异步加载数据），然后创建一个Div,引入自己的组建。

整个应用组件

解析：

1、首先对于组建进行初始化状态设置，当组建被加载后，默认加载第一页数据；

2、当进行下拉刷新时，设置状态为第一页并获取第一页数据；

3、当上拉加载更多时，状态为下一页，并获取下一页的数据。

通过Ajax获取新闻数据，对Data进行相应的处理，并进行对应的dom渲染。

** 渲染整个app**

** 静态常量**

子列表项组件，只负责渲染外面传递给他的数据（css设计样式）

** 列表组件**

列表组建下拉刷新解析：

1、通过refs找到滚动的容器scroller,给它添加监听事件，为了兼容电脑端和移动端，需要监听触摸事件和鼠标事件；

2、当触摸开始或鼠标按下时，回调touchstart函数，判断是否滚动到容器腔卜顶端，如果滚动到顶端，再判断是否是手机触摸事件，是就记录第一个触摸点的X,Y值，不是就记录电脑山圆则鼠标按下的位置；

3、当触摸移动或鼠标移动时，回调touchMove函数，判断是否是触摸状态，同时记录下触摸移动的距离（如果X方向上的位移大于Y方向，则认为是左右滑动并返回）：

4、当触摸结束或鼠标抬起时，回调touchEnd函数。若滚动容器在下拉中，但还没到刷新阀值，经过0.3S位移回到0；若已经达到刷新阀值，经过0.1s位移为刷新阀值，显示“加载”，并触发冲外面传进来的刷新回调函数；

列表组建加载更多解析：

1、监听滚动加载：当滚动容器滚动时，回调滚动加载函数；

2、如果是滚动加载状态则返回；

3、当容器滚动总高度- 容器滚动可见高度-滚过的高度小于滚动加载阀值时，设置滚动加载状态，触发从外面传进来的加载更多回调函数。

列表下拉跟随解析：

transformScroller(time, translate)传入两个参数：时间和距离

利用 transition 和transform 改变位移，transition 属性设置 'all ' + time + 's ease-in-out'表示过渡阶段逗棚慢快慢

transform 属性设置'translate3d(0, ' + translate + 'px, 0)'位移过程更流畅

当有新的属性需要更新时，也就是网络数据回来之后，把新的数据填进列表；如果之前是下拉刷新状态，恢复；如果之前是滚动加载状态，恢复。

最后渲染列表组建，通过map循环把子列表数据展示出来。

效果图如下：

前端权限控制一般雹蚂启有4种

1.菜单的控制

2.界面的控源如制

3.按钮的控制

4.请求和响应的控制

本文主要讲述如何使用react框架事件前端权限对菜单的控制。

第一步：

准备菜单数据，在该菜单数据中配置好路由跳转的物孙路径和组件存在的路径。

菜单数据如下所示：

第二步搭建项目结构

其中component的结构如下：

第三步动态生成菜单，写成一个组件：

第四步

动态生成路由，写成一个组件

第五步调用菜单组件和动态路由组件

在选择不同的源敏下拉框的时候出现不同的组件，具体的实现效果就是悔搭：

我具体的做法是，在第雹前枝一个下拉框作为一个控制组件，后面的显示结果通过判断第一个下拉框选择的不同值进行显示的划分。

首先先对第一个组件进行封装,，该文件的文件名的index.js：

现在我们对子组件进行封装，子组件的文件名为SwitchInterval.js ：

---