Unity Xiuxian mobile game | Lua dynamic sliding function (specific implementation of three source codes)

stay Unity in , There are a lot of UI Reference resources , For details, please refer to the official manual below

https://docs.unity3d.com/cn/current/Manual/script-ScrollRect.html

This time I learned about the making of sliding lists , We are UI-Window So let's make a new one sv Hang up Scroll rectangle (Scroll Rect), Hang up our content that will do , The blue box indicates the scrolling mode , According to the general standard mobile phone resolution , We only check vertical （Vertical） The way .

stay sv Under the Viewport On , Mount our mask, Make sure we click / Moved area

Finally in our content Mount the automatic layout mode ： Vertical layout group (Vertical Layout Group)

test_item Of inspector panel （Unity3D Property monitoring panel (Inspector) Unity3D Properties in the property monitoring panel Allow users to change the initial values of scripts and components outside the code .）

---

To speed up familiarity with business processes UI The design of the , It's a simple implementation lua Implementation of sliding list . The effect is as follows ：

Click on our btn_add Buttons can generate list elements for sliding , The attributes and data of these elements can be obtained by local datas = { } To get , We can attach values to each small horizontal list , And through function( ) .. end, feedback btn_add Button click event . This is a better method , It's our local datas = { } Write it into our  on_clicked_btn_add(btn) To generate multiple list elements with one key .Lua The code example is as follows ：

--  The main function here is to realize clicking btn_add Button one click generation items, The rest will be changed later 
--（3） stay datas Middle click to generate sliding list elements 
function TestWindow1:on_clicked_btn_add(btn)
    local datas = {
        {
            text = "number:1",
            function() 
                print(" The second generation 1 List elements ")
            end,
        },
        {
            text = "number:2",
            function() 
                print(" The second generation 2 List elements ")
            end,
        },
        {
            text = "number:3",
            function() 
                print(" The second generation 3 List elements ")
            end,
        },
        {
            text = "number:4",
            function() 
                print(" The second generation 4 List elements ")
            end,
        },
    }
    item.text_name.text = TT("test!!!!!")
    item.go:SetActive(true)
    for idx, data in ipairs(datas) do
        local item = self:get_or_init_test_item(idx)
        item.text_name.text = data.name
        item.text_name.text = TT(data.text)
        item.go:SetActive(true)
    end
end

function TestWindow1:on_clicked_btn_minus(btn)
    local item = self.test_items[1]
    if item then
        table.remove(self.test_items, 1)
        GameObject.Destroy(item.gameObject) -- Be sure to use item.gameObject, Guarantee unity Corresponding unity
    end
end

The other two methods are as follows ：

-- TestWindow1.lua

--Lua  The variables in are all global variables , In a block or function , Unless with  local  Explicitly declared as a local variable , The default values of variables are nil
local TestWindow1 = class('TestWindow1', 'UIWindow') -- Define local variables in a function 

--Inspector Next TestWindow1 Click generate lua Automatic generation 
function TestWindow1:__awake(name) 
    self:load('TestWindow1')
    self.btn_add = self:fcc('btn_add', UT_BTN)
    self:listen_button_clicked(self.btn_add, function(btn) self:on_clicked_btn_add(btn) end)

    self.btn_minus = self:fcc('btn_minus', UT_BTN)
    self:listen_button_clicked(self.btn_minus, function(btn) self:on_clicked_btn_minus(btn) end)

    self.test_item = self:fco('test_item')
    self.content = self:fcc('sv/Viewport/content', UT_Rect)
    self.btn_bcak = self:fcc('btn_bcak', UT_BTN)
    self:listen_button_clicked(self.btn_bcak, function(btn) self:on_clicked_btn_bcak(btn) end)

    if self.awake then self:awake() end
end

function TestWindow1:on_clicked_btn_bcak(btn)
    self:hide() 
end

-------------------------------------------------------------------------------------------------------------------------

--（1） The easiest way to add items-- One by one 
function TestWindow1:on_clicked_btn_add(btn)
    local item = GameObject.Instantiate(self.test_item, self.content)
    item:SetActive(true)
    table.insert(self.test_items, item)
end

-------------------------------------------------------------------------------------------------------------------------

--（2）for Loop to generate sliding list elements 
--[[
function TestWindow1:on_clicked_btn_add(btn)
    item.text_name.text = TT("test!!!!!")
    item.go:SetActive(true)
    for i=1 , 5 do 
        local item = self:get_or_init_test_item(i)
        item.text_name.text = TT(i)
        item.go:SetActive(true)
    end
end
]]--

-------------------------------------------------------------------------------------------------------------------------

function TestWindow1:on_clicked_btn_minus(btn)
    local item = self.test_items[1]
    if item then
        table.remove(self.test_items, 1)
        GameObject.Destroy(item.gameObject)
    end
end

local test_icon_path = "UI/SkillIcon/5123.png"

function TestWindow1:build_test_data() -- Build display data 
    local datas = {
        {
            text = "number:1",
            function() 
                print(" The second generation 1 List elements ")
            end,
        },
        {
            text = "number:2",
            function() 
                print(" The second generation 2 List elements ")
            end,
        },
        {
            text = "number:3",
            function() 
                print(" The second generation 3 List elements ")
            end,
        },
        {
            text = "number:4",
            function() 
                print(" The second generation 4 List elements ")
            end,
        },
    }
    return datas
end

function TestWindow1:get_or_init_test_item(idx) -- Get and initialize item Elements 
    local item = self.test_items[idx]
    if not item then
        local go = GameObject.Instantiate(self.test_item, self.content)
        item = {
            go = go,
            text_name = fcc(go, "text_name", UT_TMP),
            img_icon = fcc(go, "img_icon", UT_IMAGE),
            btn_go = fco(go, "btn_go"),
            text_btn = fco(go, "btn_go/text_btn"),
        }
        self.test_items[idx] = item
    end
    return item
end
    
function TestWindow1:awake()
    self.test_items = {}
end

function TestWindow1:refresh()
    self.datas = self:build_test_data()
    log_warn("test window refresh datas: %s", pts(self.datas))
    for idx, data in ipairs(self.datas or {}) do
        log_warn(" refresh item： %s", pts(data))
        local item = self:get_or_init_test_item(idx)        -- initialization item
        -- assignment item
        item.text_name.text = data.text
        item.img_icon.sprite = self:load_sprite(string.format(test_icon_path, data.icon))
        local show_btn = data.btn_text ~= nil or data.btn_text ~= ""
        item.btn_go.gameObject:SetActive(show_btn)
        if show_btn then
            self:listen_button_clicked(
                item.btn_go,
                function(btn)
                    data[1]()
                end
            )
        end
        item.go:SetActive(true)
    end
end

function TestWindow1:on_show()
    log_warn("test window on show")
    self:refresh()
end
function TestWindow1:on_hide()
    USER:unlisten_field_changed(self)
end
function TestWindow1:dispose()
end