奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > iview框架 >

iView的Page分页使用

时间:2018-10-29 14:19来源: 作者:小邱
本示例是把产品列表进行一页4个,并点击分页进行切换
iView的每一个组件,都能胜任不同的使用场景。
今天介绍的是Page分页组件,它有基本、每页数量、电梯、总数、迷你型、简洁等使用例子。

但分页组件单独哪来界面是还没完的,需要再定义一堆产品数据模型。

比如产品有图片和标题,那么数据结构则是:

[
 {
    title:'产品一',
    img:'http://www.bslxx.com/member/templets/images/ad200.png'
 },
{
    title:'产品二',
    img:'http://www.bslxx.com/member/templets/images/ad200.png'
 },
]

但是第一页数据4个怎么拿的,所以要再数组里面再定义一个数组即:

[
     [第一页数据],
     [第二页数据]
]

然后在data模型中,再定义一个page变量,初始化为0

然后在列表遍历的时候,一进页面只获取list[page],这样列表就只显示第一页的数据了。

那么点击分页怎么切换指定页的数据呢?

翻开文档发下有一个on-change事件。

但把它加在Page组件并没有触发,后来在其加上@on-change就可以了,它返回的就是当前选择的页码。

把这个返回的页码赋值给page进行列表驱动。

需要代码回复666就发出来 (责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-10-30 14:10

关注奔三路