网库网(www.wangkuwang.com)精品网站源码,织梦建站模版,游戏源代码分享平台

模板户源码

当前位置:首页 -> CMS教程 -> WP教程 正文

VueJs组件---分页

时间:2018-06-01 07:12:05 [整站源码]作者:zhaopulei


LYearn LYearn

首先,清楚需求,当然这里的需求很简单很明显,就是一个分页器。

vuejs中实现分页的点:

    1.与父组件数据交互

    2.分页默认做多显示多少,超出部分怎么处理

    3.渲染更新的数据,具体使用methods、或者使用computed



总体思路:

    页码由数组控制,数组由数据控制;



第一点:与父组件数据交互

    数据交互主要是:

    1.从父组件获取总页码

    2.告诉父组件当前页码

具体实现:

    父组件中引入子组件(import进来--在components中注册--在页面中使用了)


父组件中的使用如下图:

说明:

    totalPager:绑定的属性

    pageNum:暂时在父组件data定义的总页码

    @currentPager:监听子组件中的currentPager

    getCurrentPager:父组件中执行的方法,比如发送异步请求


子组件中结构部分:

    1.span中自动生成的页码遍历一个pagerArr,这个数组在computed中定义,主要功能就是生成页面中的页码。


子组件中的js部分:

说明:

    1.props中接收上面绑定的totalPager属性,在子组件中使用这个totalPager的话,可以直接使用this.totalPager进行运算或者逻辑判断

    2.preClipped:控制前部分溢出省略显示状态

    3.nextClipped:控制后部分溢出省略显示状态

    4.currentPager:默认当前页码是0


methods中定义的方法:

    pageto:跳转到哪个index的页码

    prePager:每次执行,跳前一页,对应的当前页码减一

    nextPager:每次执行,跳到后一页,对应的当前页码加一


这里使用了computed方法进行数组的更新,最开始使用watch进行监听currentPager,但是由于watch观察这模式并不推荐,就改成了computed计算属性。计算属性中的pageArr就是那个控制页面的数组,这个pageArr数组中的数据则有left和right中间的差值控制;这里出现的5,表示当前页面中只最大默认显示5个页码。


------至此分页重启------


上面写的分页方法还有些小bug,具体bug是什么,如果你用了肯定会知道,页数点击跳转到当前页的时候,有问题。

需要优化和修改的功能,目前有下面几点:

    1.分页展示限制是写死的,这里直接给的数值是5

    2.功能上的bug,一旦分页超过了限制页,点击页数的时候是没有触发跳转到页面的功能的


----完善code

    1.分页数的限制,在data()中return做限定



    2.之所以有上面的点击无法触发跳转的问题,原因是,页面中的currentPage和index有些混乱,每个分页绑定的active是currentpage + 1 ,开始考虑的是index是从0开始计数,而分页首页是1.造成了上面的问题


----解决bug的方法

    明白问题所在,那么就好解决这个问题了。

    index和currentPager分开,currentPage就是当前页码,不和index混为一谈。index就是创建分页遍历数组的索引,也不要和currentPage搞混,模板结构绑定做了更改如下:

    上面的totalPager就是创建的总页数,并不是总条数

    span中绑定的数组中的每一项

    pageTo()的参数也是分页这个数组中的每一项,而无关索引

    首页和末页添加了disabled功能,限制达到首页和末页的时候禁止点击

    最后在计算属性中也做了一些限制:

上面的几个if判断方法是根据当前currentPager是否等于每一项做的判断,进行的控制,总觉得还有更好的办法。所有功能完善以后,再来看看这个怎么才能更完善~~~嘻嘻……


-------再次关闭------

------(*^__^*)----- 


之前使用watch的时候,也写了相应的逻辑代码;

这里的代码在不停的更新数组,最后在push 的时候每次都将值push进去,这里没有完善,需要在push之前对当前这个值进行判断,是否超过了限制。

即使进行了判断,是用watch也不是一个值得推荐的方法,如果想要在这个基础上进行更改,可以考虑的方法是:

    将watch中的这个currentPager写一个方法在methods中进行定义,在每次执行到需要更新数组的时候,就调用这个方法,当然不要忘了在方法前面加上this。(*^__^*) 


---------end---------

    本文标签:AutoTags插件服务端需要您提供购买者的账号和密码才能继续访问  折翼天使  莎莎源码  吾爱源码  其他源码 

    转载请注明来源:PHP手机端发卡多种支付商业版源码

    本文永久链接地址:https://www.suibianlu.com/11942.html

    郑重声明:
    本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。
    若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法链接失效或侵犯版权,请给我们来信:admin@suibianlu.com

    栏目导航
    最新文章
    热门文章
    Top