实习 day5

这次的任务是做 分页 + 请求数据

分页

效果如下



就是点击跳转到另外一个页面。
我参考了一篇很不错的博文：
https://segmentfault.com/a/1190000004200481
大致的意思就是

<组件1>    <组件2>        <div>内容1</div>    </组件2>    <组件2>        <div>内容2</div>    </组件2></组件1>

在组件1里，可以使用this.props.child获取到组件2。组件2也可以通过this.props.child获取到div，这样就可以将三者的关系联系在一起啦。
分页的实现就是将不显示的页数隐藏起来，只显示要显示的页。
如何知道当前页是否是要显示的页呢？
主要是通过记录一个state为当前的状态，遍历子元素，若子元素下标等于该state，则为要显示的页，添加一个active类即可。
具体怎么做还真不好说清楚，动手实践最好。

请求数据

这次请求数据使用的是原生js，首先声明一个XMLHttpRequest实例。

var xhr = new XMLHttpRequest();

处理返回数据的函数
当xhr的readyState改变就会触发onreadyrstatechange函数，可以使用这个来确定是否接受了所有相应数据。

xhr.onreadystatechange = function()             if(xhr.readyState==4) if((xhr.status>=200||xhr.status<300)||xhr.status==304) 

处理接受的xhr.responseText响应字符串
两种方法

1. var responseData = JSON.parse(xhr.responseText);2. var responeseData = eval("("+xhr.responseText+")");

第二种使用eval加上括号的原因是eval内的字符串当作表达式执行，所以必须加个（），同时这也是eval不安全的原因。

填iscroll的坑

iScroll主要还是坑在无法滚动的问题上，主要的原因就是没有调用myScroll.refresh()导致其无法滚动。
还可能会报myScroll为null，因为由于执行myScroll.refresh()的时候文档节点尚未被渲染出来，自然无法找到。