整理前端面试题(十四): 常用组件的实现思想

components.png

一.上拉刷新数据的原理

• 一个父盒子内部套一个可以scroll的子盒子
• 给子盒子设置touchstart事件,将子盒子e.targetTouches[0].pageY的值存到变量touchStart中
• 给子盒子设置touchmove事件,根据手指滑动的距离去改变子盒子的top:scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px';
• 给子盒子设置touchend事件,获取子盒子scrollTop的值,如果大于一定的值,发送ajax请求获取新的数据, 创建DOM元素insertBefore到子盒子中.
• 详细实现代码如下:

    

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    

二.请说说实现分页的简单步骤

• 根据数据总量和每页显示的数量计算出页数
• 根据页数动态生成分页的按钮,将其页码保存在自定义标签中
• 给页码按钮的父盒子添加其代理事件, 获取自定义标签中的页码,根据页码计算出当前的起始数据发送ajax请求获取数据,动态渲染页面.
• 给左右箭头按钮的父盒子添加其代理事件,设置变量count,每次点击对count进行计算后得到页码发送ajax请求(同上一步),注意判断第一页和最后一页不能再点击的情况
• 具体的模拟实现如下:

三.轮播图的实现思路

• 一个父盒子用做container
• 在container下有个ul, 其宽度为其所以li的总宽度
• 将ul设置overflow:hidden属性,让其只显示当前的li
• 通过setInterval改变其ul的left的值,实现自动轮播
• 给左右箭头和小点添加点击事件
• 具体代码实现如下:

    
    
    



    

        

            
![](images/1.jpg)
            
![](images/2.jpg)
            
![](images/3.jpg)
            
![](images/4.jpg)
            
![](images/5.jpg)
        
        

            
        
    
    
<>