ViewPager使用

ViewPager

1. 绑定数据源

• 绑定数据源

--1.bindData方法绑定
ViewPager().bindData(homeData.list)

--2.构造方法传入数据源
ViewPager(homeData.list)

2. 绑定cell

--item的固有属性：
--item.row：返回当前page页数

bindCell(function(item)
        if item.row % 2 == 0 then
            return txtCell(item)
        else
            return imgCell(item)
        end
    end)

3. 事件回调

ViewPager()
    .onSelected(function(index)
        --滚动停止状态，页面选中回调
        print("onSelected-->" .. index)
    end)
    .onChangeSelected(function(to)
        --滑动后选中具体页面位置回调 (如果还是在当前Page页面，则不会回调，只有页面position发生变化后才会回调)
        print("onChangeSelected-->" .. to)
    end)
    .setTabScrollingListener(function(percent, fromIndex, toIndex)
        --滚动百分比回调
        print("setTabScrollingListener-->" .. percent, fromIndex, toIndex)
    end)
    .setPageClickListener(function(index)
        --点击了某一页的回调
        print("setPageClickListener-->", index, self.getCurrentPage())
    end)

附：完整demo如下：

model(homeData)

txtCell(item) {
    Label(item.name)
    .widthPercent(100)
    .heightPercent(100)
    .textColor(Color(0xffffff))
    .bgColor(Color(100, 100, 200, 1))
    .textAlign(TextAlign.CENTER)
}
imgCell(item) {
    ImageView(item.img)
    .widthPercent(100)
    .heightPercent(100)
    .contentMode(ContentMode.SCALE_ASPECT_FILL)
}
---
--- UI
ui {
    --- layout views
    ViewPager()
    .ID(vpid)
    .bindData(homeData.list)
    .bgColor(Color(255, 255, 255, 1))
    .spacing(5)
    .height(180)
    .spacing(3)
    .setScrollEnable(true)
    .bindCell(function(item)
        if item.row % 2 == 0 then
            return txtCell(item)
        else
            return imgCell(item)
        end
    end)
    .onSelected(function(index)
        --滚动停止状态，页面选中回调
        print("onSelected-->" .. index)
    end)
    .onChangeSelected(function(to)
        --滑动后选中具体页面位置回调 (如果还是在当前Page页面，则不会回调，只有页面position发生变化后才会回调)
        print("onChangeSelected-->" .. to)
    end)
    .setTabScrollingListener(function(percent, fromIndex, toIndex)
        --滚动百分比回调
        print("setTabScrollingListener-->" .. percent, fromIndex, toIndex)
    end)
    .setPageClickListener(function(index)
        --点击了某一页的回调
        print("setPageClickListener-->", index, self.getCurrentPage())
    end)
    ,
    Label("scrollToPage(2)").padding(10, 20, 10, 20)
    .bgColor(Color(100, 100, 200, 1))
    .top(20)
    .onClick(function()
        vpid.scrollToPage(2)
    end)
}

---
--- preview
local function preview()
    homeData.list = {}
    for i = 1, 5 do
        table.insert(homeData.list, i,
                     {
                         img = "https://hbimg.huabanimg.com/7c41bc5871d74c9036932ca9bba76de363727be113b6fd-NApej6_fw658",
                         name = "哈哈哈" .. i
                     }
        )
    end
end