cocos2d-x lua 利用ScrollView实现虚拟列表

已于 2023-09-26 09:52:17 修改
阅读量207 收藏
点赞数
文章标签： 前端 cocos2d lua
于 2023-09-04 17:14:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43771500/article/details/132673727
版权 
-- 创建虚拟列表类

local VirtualList = class("VirtualList")

---@param scrollView ccui.ScrollView

function VirtualList:ctor(scrollView,data,callback, offset)

    self.scrollView=scrollView

    -- self.scrollView:setClippingEnabled(false)

    local model =scrollView:getChildByName("model")

    model:setAnchorPoint(cc.p(0,1))

    self.itemPrefab =model

    model:retain()

    self.callback=callback

    self.offset=offset or 5

    self.itemContent={}

    self.scrollView:removeAllChildren()

    self.scrollViewSize =self.scrollView:getContentSize()

    self.item_h =self.itemPrefab:getContentSize().height

    self.item_w =self.itemPrefab:getContentSize().width

    self.onEvent=false

    self.selectUPId =0

    self.selectDownId=0

    self:initData(data)

    self:creatrViewMaxItems()

    self.lastPosition = cc.p(0, -self.content_h+self.scrollViewSize.height)

    self.scrollView:onNodeEvent("exit", function()

        self:disableNodeEvents()

    end)

    self.scrollView:setScrollBarEnabled(false)

end



function VirtualList:initData(data)

    self.data =data

    local col =self:getItemCols()

    local row =math.ceil(#self.data / col)

    local contentSize = cc.size(self.scrollViewSize.width, row*(self.item_h+self.offset))

    self.scrollView:setInnerContainerSize(contentSize)

    -- print("设置容易大小",contentSize.height,self.scrollView:getInnerContainerPosition().y)

    self.content_h=contentSize.height >=self.scrollViewSize.height and contentSize.height or self.scrollViewSize.height

    local maxRow =math.ceil(self.scrollViewSize.height/(self.item_h+self.offset))+1

    if maxRow*col<#self.data and not self.onEvent then

        self.onEvent=true

        self.scrollView:addEventListener(handler(self,self.onScrollViewEvent))

    end

end



--更新数据调用

function VirtualList:refreshUI(data,resetList)

    self.scrollView:stopAutoScroll()

    local old_len =#self.data

    local new_len = #data

    self.updateing =true

    local last_h =self.content_h

    local pos =self.scrollView:getInnerContainerPosition()

    self:initData(data)

    local now_h =self.content_h

    local change_h =now_h-last_h

    local cy =pos.y-change_h

    local type =0

    if old_len==new_len then

        type=0

        local maxRow =math.ceil(self.scrollViewSize.height/(self.item_h+self.offset))+1

        if old_len<maxRow*self:getItemCols() then

            self.selectUPId=0

            resetList=true

        end

        if resetList then

            self.selectUPId=0

            cy= -self.content_h+self.scrollViewSize.height

        end

        self.scrollView:setInnerContainerPosition(cc.p(0,cy))

    elseif old_len<new_len then

        --增加数据

        type =1

        local maxRow =math.ceil(self.scrollViewSize.height/(self.item_h+self.offset))+1

        if old_len<maxRow*self:getItemCols() then

            self.selectUPId=0

        end

        if resetList then

            self.selectUPId=0

            cy= -self.content_h+self.scrollViewSize.height

        end

        self.scrollView:setInnerContainerPosition(cc.p(0,cy))

    elseif old_len>new_len then

        --减少数据

        type =2

         self.selectUPId=0 --  减少必须从0开始

        self.scrollView:setInnerContainerPosition(cc.p(0,-self.content_h+self.scrollViewSize.height))

    end

    self:updateItem(change_h,type,resetList)

    self.updateing =false

end



--  计算行数

function VirtualList:getItemRows()

    local col =self:getItemCols()

    local row =0

    local maxRow =math.ceil(self.scrollViewSize.height/(self.item_h+self.offset))+1

    local minRow =math.ceil(#self.data / col)

    row =math.min(minRow,maxRow)

    return row

end



--  计算列数

function VirtualList:getItemCols()

    local size = self.scrollView:getInnerContainerSize()

    local col =math.floor(size.width/(self.item_w+self.offset))

    return col

end



--创建可视范围内的item数量

function VirtualList:creatrViewMaxItems()

    local index =1

    for i = 1,  self:getItemRows() do

        for j = 1, self:getItemCols() do

            local item = self.itemPrefab:clone()

            local h =self.content_h- (self.item_h+self.offset)*(i-1)

            item:setPosition(cc.p((j - 1) * (self.item_w+self.offset),h))

            self.scrollView:addChild(item)

            if not self.itemContent[i] then

                self.itemContent[i]={}

            end

            self.itemContent[i][j]=item

            if(index>#self.data) then

                item:setVisible(false)

                break

            end

            self:updateId(1)

            self.callback(item,self.data[self.selectUPId])

            index =index +1

        end

    end

end



--更新可视范围内的item

function VirtualList:updateItem(change_h,type,resetList)

    local row =self:getItemRows()

    local col =self:getItemCols()

    for i = 1,  row do

        for j = 1, col do

            local py =0

            local item

            if type == 1 then

                -- 增加数据

                if not self.itemContent[i] then

                    self.itemContent[i]={}

                    py=self.itemContent[i-1][1]:getPositionY()-(self.item_h+self.offset)

                else

                    if self.itemContent[i][j] then

                        py=self.itemContent[i][j]:getPositionY()+change_h

                    else

                        py=self.itemContent[i][1]:getPositionY()

                    end

                end

                item=self.itemContent[i][j]

                if not item then

                    item = self.itemPrefab:clone()

                    self.scrollView:addChild(item)

                    self.itemContent[i][j]=item

                    self:updateId(1)

                    if(self.selectUPId>#self.data) then

                        item:setVisible(false)

                    else

                        item:setVisible(true)

                        self.callback(item,self.data[self.selectUPId])

                    end

                else

                    local itemId

                    local maxRow =math.ceil(self.scrollViewSize.height/(self.item_h+self.offset))+1

                    if self.selectUPId>=maxRow*col  then

                        itemId =self.selectUPId-((row-(i-1))*col-j)

                    else

                        self:updateId(1)

                        itemId =self.selectUPId

                    end

                    if(itemId>#self.data) then

                        item:setVisible(false)

                    else

                        item:setVisible(true)

                        self.callback(item,self.data[itemId])

                    end

                end

                item:setPosition(cc.p((j - 1) * (self.item_w+self.offset),py))

            elseif type==2 then

                --减少数据

                item=self.itemContent[i][j]

                local h =self.content_h- (self.item_h+self.offset)*(i-1)

                item:setPosition(cc.p((j - 1) * (self.item_w+self.offset),h))

                if(self.selectUPId>#self.data) then

                    item:setVisible(false)

                else

                    item:setVisible(true)

                end

                self:updateId(1)

                self.callback(item,self.data[self.selectUPId])

            elseif type==0 then

                item=self.itemContent[i][j]

                local itemId

                if not resetList then

                    itemId =self.selectUPId-((row-(i-1))*col-j)

                else

                    self:updateId(1)

                    itemId =self.selectUPId

                    local h =self.content_h- (self.item_h+self.offset)*(i-1)

                    item:setPosition(cc.p((j - 1) * (self.item_w+self.offset),h))

                end

                if(itemId>#self.data) then

                    item:setVisible(false)

                else

                    item:setVisible(true)

                    self.callback(item,self.data[itemId])

                end

               

            end            

        end

    end    

end



function VirtualList:onScrollViewEvent(sender,eventType)

    if self.updateing then

        return

    end

    if eventType == ccui.ScrollviewEventType.containerMoved then

        -- ScrollView滚动中的逻辑处理

        local currentPosition = sender:getInnerContainerPosition()

        local delta = cc.p(currentPosition.x - self.lastPosition.x, currentPosition.y - self.lastPosition.y)

        self:updateItemPos(delta,math.floor(currentPosition.y-self.scrollViewSize.height))

        self.lastPosition =currentPosition

    end

end

-- type 1 up 2 down

function VirtualList:updateId(type)

    local row =self:getItemRows()

    local col =self:getItemCols()

    if type==1 then

        self.selectUPId =self.selectUPId+1

        local id=self.selectUPId-(row-1)*col-(col-1)

        self.selectDownId =id

        -- print("selectUPId 向上 =",self.selectUPId,self.selectDownId)

    else

        self.selectDownId =self.selectDownId-1

        local id=self.selectDownId + row*col-1

        self.selectUPId=id

       

        -- print("selectDownId 向下 =",self.selectDownId,self.selectUPId)

    end



end



--更新坐标

function VirtualList:updateItemPos(pos,offsetY)

   

    if pos.y==0 then

        return

    end

    if pos.y>0 then

        local item=self.itemContent[1][1]

        local startY =item:getPositionY()

        if -(startY-self.item_h-self.offset)<=offsetY then

            local firstElement = table.remove(self.itemContent, 1)

            local item =self.itemContent[#self.itemContent][1]

            local py1 =item:getPositionY()

            py1 =py1-(self.offset+self.item_h)

           

            -- print("移除头部并添加到末尾",self.selectUPId,py1)

            for index, value in ipairs(firstElement) do

                value:setPositionY(py1)

                self:updateId(1)

                if(self.selectUPId>#self.data) then

                    value:setVisible(false)

                else

                    value:setVisible(true)

                    self.callback(value,self.data[self.selectUPId])

                end



            end

            table.insert(self.itemContent, firstElement)

        end

    else

        local item=self.itemContent[#self.itemContent][1]

        local endY =item:getPositionY()+self.scrollViewSize.height

        if -(endY)>=offsetY then

            local lastElement = table.remove(self.itemContent)

            local py1 =self.itemContent[1][1]:getPositionY()

            py1 =py1+(self.offset+self.item_h)

            -- print("移除末尾并添加到头部",self.selectDownId,py1)

            for i = self:getItemCols(), 1,-1 do
                local item=lastElement[i]
                item:setPositionY(py1)
                item:setVisible(false)
                self:updateId(2)
                if self.selectDownId>=1 then
                    item:setVisible(true)
                    self.callback(item, self.data[self.selectDownId])
                end
            end
            table.insert(self.itemContent, 1, lastElement)
        end
    end

end



-- 退出界面时销毁监听器

function VirtualList:disableNodeEvents()



end



return VirtualList

weixin_43771500
关注
ScrollView实现ListView效果的一种实现方式
zser567的博客
03-12 275
先看效果图： 如图所示，我需要实现一个这样的布局，当然，这样太简单的，直接一个ListView，自定义一个adapter就可以了。然后我就这么做了，但是，我接下来还要实现这样一个效果： 其中“XXX”是高频率不停变化的。这样就有点尴尬了，这意味着适配器需要不停的重构界面，而重构界面的时候，会严重影响按钮的响应，出现点击不灵的现象。还有个问题，我可以对响应的“按钮3”进行各种操作，但对于...
Cocos2dx-lua ScrollView[一]基础篇
ellis1970的博客
02-15 1125
cocos游戏中ScrollView控件大量使用，95%以上的项目都会使用ScrollView，个别游戏可能全部使用翻页的滑动效果。如果想要精通Cocos的UI开发，精通ScrollView控件非常关键，因此对ScrollView的使用进行总结很有必要
【cocos 3.8】虚拟列表
EddyLwei的博客
10-24 847
cocos 3.8 简单的虚拟列表
网页效果 - 虚拟滚动列表
qq_43612151的博客
07-16 712
一、虚拟滚动列表 虚拟列表的意思就是在数据量超大的情况下，页面只渲染可视范围的列表，减少dom数量，控制页面性能的效果。 二、具体实现 talk is cheap, show me the code. <template> <div class="virtual-list"> <h1>虚拟列表</h1> <div class="list-view" ref="scrollBox" @scroll="handleScroll">
cocos creator FairyGUI虚拟列表的使用
weixin_44235418的博客
03-31 1043
this.ui.m_List.setVirtual();//开启虚拟列表 this.ui.m_List.itemRenderer = this.renderAchListItem.bind(this);//设置列表item的渲染函数 this.ui.m_List.itemProvider = this.getListItemResource.bind(this);//设置这个函数为列表的item提...
Cocos Creator3.8 项目实战（七）Listview 控件的实现和使用
w风雨无阻w的专栏
10-06 3235
在cocoscreator 中，没有现成的 Listview 控件， 无奈之下， 只能自己动手 用ScrollView 来实现一个。这样，有类似需求的朋友，能专注业务功能的开发，就不用重复造轮了。采用了 ScrollView 配合 item 预制体Prefab 来实现，动态生成列表项， 支持调整 item 项的间距，支持横向和竖向滚动。采用了AbsAdapter 适配器，用于设置数据，更新视图页面，获取数据数量，计算 item 显示位置等。下面以排行榜Listview 实现为例，进行详细说明。
lua-使用滚动容器ScrollView
xiaowenliuwen的博客
06-30 5311
ScrollView是cocos2dx ui里面封装的一个控件，首先看下C++中创建ScrollViewusing namespace cocos2d::ui;//首先要使用ui命名空间 ui::ScrollView* scrollView = ui::ScrollView::create(); scrollView->setContentSize(Size(280.0f, 100.0f)); sc
Cocos2dx-lua ScrollView[二]进阶篇
ellis1970的博客
03-11 578
本文介绍sv的一种封装类库，来实现快速创建sv
Cocos2d-lua ScrollView优化2
继续激情，继续奋斗。
06-05 2551
- 支持横向和竖向 - 支持多行多列 - item的适配 - item数量不够时的居中 - 刷新数据 - 跳转到指定item - 飞入动画
cocos2d-x lua 实现listview动态加载item，优化加载
Willow_Chen的博客
03-26 2797
--listview 加载item优化 function gFunUtils.tableShow(listview, number, grid, callback, refresh)--参数说明 数量，模板temp，刷新回调，强制刷新 if number == nil or grid == nil or callback == nil then return e...
Cocos Creator 实现的tableView列表demo
06-13
cocos cerator 实现的 tableView 列表，封装了含有回收机制，列表复用，缓存机制等功能防止内存泄露与卡顿等问题
一个基于CocosCreator的List列表组件
08-11
一个基于CocosCreator的List（列表）组件。支持虚拟列表、不定宽/高、选择模式、滑动模式等。
cocos-lua 制作无限循环ScrollView ，遇到的坑记录下来，笔记
qq_27911879的博客
05-22 1745
本来是在紧急开发中，想找官方已经有的，但是官方好像没有，无奈，只能自己写了。    目前只写到了可以循环使用，也可以到顶不动，但是那个回弹效果还没写完。    第一个坑：找监听。        百度上面说是有几种办法，我都试了。第一感觉就是没用，然后不断的尝试找资料，后来发现是因为点击事件的原因，我ScrollView 的底图是一个layout，打开layout点击事件后就收不到全局点击事件了，所...
Cocos2d-x滚动列表详解(CCScrollView的使用)
在楚重飞的专栏
05-14 3639
今天要写一个滚动列表功能,类似下面这样。（图片资源都是自己从天天酷跑里面抠的,仅用于学习方便） 首先,这样一个列表就和iOS里面的UITableView没什么两样,当然,Android中肯定也存在类似的控件。 在cocos2d-x引擎中参照ios中的UITableView实现了一个叫做CCTableView的类，用于创建列表，对于熟悉ios程序设计的人来说，这个内容应该是很好理
cocos-Lua FairyGUI 之 列表(九)
qq_24726043的博客
12-16 1821
列表 参考: 列表 简介 前面曾说过在cocosStudio中，提供了PageView、ListView、ScrollView、TableView等。 在FairyGUI中，这些都可以由GList来实现。 列表，它有如下几个特点： 列表的滚动容器ScrollPane与列表GList的实现是分离的 支持上拉/下拉回调 支持虚拟列表的实现，其实现原理类似于tableView 虚拟列表的删除，不是通过remove而是通过setNumItems的数目来删除 列表支持多选，勾选UI编译器中：选择模式为多选（单击实
lua 根据图片高度设置scrollview高度
Eric_gg的博客
03-29 1038
一个Scrollview 要展示两张不同长度的图片，写两个固定长度的Scrollview未免太浪费，就看了一下源码，找到了一个可以设置Scrollview滚动区域的方法。setInnerContainerSize（cc.size()） 下边是我自己封装的方法，传scrollview 和一个图片变量名进去function KaengRuleLayer:changeScrollviewHight(...
uniapp小程序如何通过虚拟列表配合节流，完成上拉刷新下拉加载，避免页面卡顿，提升性能呢？
weixin_63929524的博客
05-03 5520
综上所述，通过虚拟列表技术和节流技术的优化，我们可以实现uniapp小程序中的上拉刷新和下拉加载功能，并避免因大量数据渲染导致的页面卡顿问题，提升了页面的流畅性和稳定性。
一款颜值颇高的虚拟列表！差点就被埋没了，终于还是被我挖出来了
最新发布
奎特尔星球
05-24 448
大家好，我是晓衡！今天，推荐一款颇有颜值的虚拟列表组件，不然真的被埋没就可惜了！我们先来看下效果：感觉怎么样？还不错吧！为什么说这个资源差点被埋没呢？因为个朋友找到晓衡询问，有没优化过的 ScrollView 能支持 grid 的？很多人都知道，引擎自带的 ScrollView 功能有限，特别是新手，要将它玩转还真的不太容易。可能用跑是跑起来了，但那体验却是各种糟心，很容易被老板、用户骂娘。这位朋...
cocos2dx在不同安卓机型下scrollview裁剪失败
wawa1203的专栏
04-13 1434
最近项目上遇到个问题一直困扰着我，我用cocossstudio做了一个uiscrollview，结果在pc和大部分安卓手机上都能完美运行，但是在有些机型（我用小米4，三星S5， HTC one）上scrollview裁剪会失败，在上面划出显示区域仍然显示，为了解决这个问题，我上网查，各种试，问群里的大牛，最终终于找到了解决的办法。 其实办法很简单，就是在代码中加注一句:setClippi
cocos2d-x+Lua快速开发游戏指南
cocos2d-x提供对Lua的支持，使得开发者能够利用其简洁的语法快速构建游戏逻辑，同时保持高性能和强大的扩展性。这种组合在对比如CoronaSDK等纯Lua引擎时，既有性能提升，又不失灵活性。 首先，cocos2d-x+Lua的开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值