现项目中武将信息显示采用了PageView控件, 每一页显示6个武将信息, 游戏中武将数量可以为0~n, 如果一次性将所有武将创建出来显示效率可想而知；
所以有了PageView动态刷新并左右循环滑动的需求。大致原理如下:
假设需要显示的信息为n页:
1. n = 1，只有一页，不需要做循环滑动。
2. n = 2，创建3页：page0, page1, page2; page0和page2显示第2页信息, page1显示第1页信息;
初始化时强制显示page1。
3. n >= 3，创建3页：page0, page 1, page2; page0显示第n页信息, page1显示第1页信息, page2显示第2页信息;
初始化时强制显示page1。
循环实现：
PageView中有3页及以上时，响应TURNING事件，当滚动到第一页时删除最后一页, 新建一页插入到最前面; 当滚动最后一页时删除第一页
新建一页插入到最后面。 注:目前只有通过添加删除这种方式来现实pageindex的动态改变。
ccs中界面的设计：
1. 每一个页的布局不同，在编辑器中将所有页面创建出来，添加删除的原理同上。
2. 每一个页面布局相同, 在编辑器中只需要拼一个页面，代码中使用clone()即可。
页面布局相同代码实现：
每一个页面布局不同的实现此处不再赘述!
所以有了PageView动态刷新并左右循环滑动的需求。大致原理如下:
假设需要显示的信息为n页:
1. n = 1，只有一页，不需要做循环滑动。
2. n = 2，创建3页：page0, page1, page2; page0和page2显示第2页信息, page1显示第1页信息;
初始化时强制显示page1。
3. n >= 3，创建3页：page0, page 1, page2; page0显示第n页信息, page1显示第1页信息, page2显示第2页信息;
初始化时强制显示page1。
循环实现：
PageView中有3页及以上时，响应TURNING事件，当滚动到第一页时删除最后一页, 新建一页插入到最前面; 当滚动最后一页时删除第一页
新建一页插入到最后面。 注:目前只有通过添加删除这种方式来现实pageindex的动态改变。
ccs中界面的设计：
1. 每一个页的布局不同，在编辑器中将所有页面创建出来，添加删除的原理同上。
2. 每一个页面布局相同, 在编辑器中只需要拼一个页面，代码中使用clone()即可。
页面布局相同代码实现：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
--PageView事件
PAGEVIEW_EVENT_TYPE =
{
TURNING = 0,
}
--当前显示的页码(1 ~ pages)
local
pageIdx = 1
--英雄列表(id)
local
heroList = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18}
--PageView
local
pvWnd = touchgroup:getWidgetByName(
"test/pv"
)
--pIdx: 该页显示的内容索引(1 ~ pages)
--iIdx: 插入位置
--bClone: 是否克隆, 第一页已存在为false, 否则为true
function
test:addPage(pIdx, iIdx, bClone)
local
newPage =
nil
if
not
bClone
then
newPage = pvWnd:getPage(0)
else
newPage = pvWnd:getPage(0):clone()
end
newPage:setTag(pIdx)
pvWnd:insertPage(newPage, iIdx)
--根据pIdx设置武将信息(每个页面有6个武将)
for
i = 1, 6
do
-----
end
end
--武将面板刷新
function
test:updateHeroPanel()
--删除原来的页面(第一页保留用于clone)
for
i = pvWnd:getPages():count() - 1, 1, -1
do
pvWnd:removePageAtIndex(i)
end
--添加新的页面(每页显示6个)
local
pages =
math.ceil
(table.nums(heroList) / 6)
pageIdx = 1
if
1 == pages
then
self:addPage(1, 0,
false
)
elseif
2 == pages
then
self:addPage(2, 0,
false
)
self:addPage(1, 1,
true
)
self:addPage(2, 2,
true
)
pvWnd:scrollToPage(1)
elseif
pages >= 3
then
self:addPage(pages, 0,
false
)
self:addPage(1, 1,
true
)
self:addPage(2, 2,
true
)
pvWnd:scrollToPage(1)
end
end
function
test:onPageViewEvent(sender, eventType)
if
eventType == PAGEVIEW_EVENT_TYPE.TURNING
then
local
pages =
math.ceil
(table.nums(heroList) / 6)
if
pages >= 3
then
if
0 == pvWnd:getCurPageIndex()
then
pageIdx = pageIdx - 1
if
pageIdx <= 0
then
pageIdx = pages
end
local
nextPageIdx = pageIdx - 1
if
nextPageIdx <= 0
then
nextPageIdx = pages
end
pvWnd:removePageAtIndex(2)
self:addPageToHeroPanel(nextPageIdx, 0,
true
)
--PageView的当前页索引为0,在0的位置新插入页后原来的页面0变为1;
--PageView自动显示为新插入的页面0,我们需要显示为页面1,所以强制滑动到1.
pvWnd:scrollToPage(1)
--解决强制滑动到1后回弹效果
pvWnd:update(10)
elseif
2 == pvWnd:getCurPageIndex()
then
pageIdx = pageIdx + 1
if
pageIdx > pages
then
pageIdx = 1
end
local
nextPageIdx = pageIdx + 1
if
nextPageIdx > pages
then
nextPageIdx = 1
end
pvWnd:removePageAtIndex(0)
self:addPageToHeroPanel(nextPageIdx, 2,
true
)
end
elseif
pages == 2
then
if
0 == pvWnd:getCurPageIndex()
then
local
nextPageIdx = 0
if
1 == pageIdx
then
pageIdx = 2
nextPageIdx = 1
else
pageIdx = 1
nextPageIdx = 2
end
pvWnd:removePageAtIndex(2)
self:addPageToHeroPanel(nextPageIdx, 0,
true
)
--PageView的当前页索引为0,在0的位置新插入页后原来的页面0变为1;
--PageView自动显示为新插入的页面0,我们需要显示为页面1,所以强制滑动到1.
pvWnd:scrollToPage(1)
--解决强制滑动到1后回弹效果
pvWnd:update(10)
elseif
2 == pvWnd:getCurPageIndex()
then
local
nextPageIdx = 0
if
1 == pageIdx
then
pageIdx = 2
nextPageIdx = 1
else
pageIdx = 1
nextPageIdx = 2
end
pvWnd:removePageAtIndex(0)
self:addPageToHeroPanel(nextPageIdx, 2,
true
)
end
end
end
end
|
每一个页面布局不同的实现此处不再赘述!
扫一扫
3432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
