左侧列表，右侧详情-526互联

主体界面：处理左侧列表条目选择，和右侧页签切换

local _curTabIndex = 0
local _tabPanelScriptList = {}
local _curTabPanel = nil
 
--////////// 英雄列表
local _selectItemIndex_Hero = 0
local _selectItemData_Hero = nil
local _selectItemScript_Hero = nil
--//////////
 
function Awake()
    listView_Hero.spawnDelegate = OnCellSpawn_Hero
 
    tog_1.onValueChanged:AddListener(function(isOn) OnValueChanged_Tab(1, isOn, tog_1, PanelAttr) end)
    tog_2.onValueChanged:AddListener(function(isOn) OnValueChanged_Tab(2, isOn, tog_2, PanelEquip) end)
    tog_3.onValueChanged:AddListener(function(isOn) OnValueChanged_Tab(3, isOn, tog_3, PanelPoint) end)
end
 
---参数传入
function OnOpenUIEventHandler(data)
    if tog_1.isOn then
        OnValueChanged_Tab(1, true, tog_1, PanelAttr)
    else
        tog_1.isOn = true
    end
    InitShowListView()
end
 
function InitShowListView()
    --默认选中, 更新右侧详情放在这边处理, 不放在OnCellSpawn中
    if nil == _selectItemData_Hero then
        _selectItemData_Hero = _liuliRealmDungeonCache:GetHeroByFormation(1)
        _selectItemIndex_Hero = 1
    end
    UpdateDetailAll_Hero()
 
    _selectItemScript_Hero = nil
    listView_Hero.verticalNormalizedPosition = 0
    listView_Hero.totalCount = 5
    listView_Hero:RefreshCells()
end
 
function OnValueChanged_Tab(index, isOn, tog, tabPanel)
    if not isOn then return end
    if _curTabIndex == index then return end

    if nil ~= _curTabPanel then
        local oldTabIndex = _curTabIndex
        local func = self.scriptData["TabUnSelect_" .. oldTabIndex]
        if nil ~= func then
            func()
        end
        if tabPanel ~= _curTabPanel then
            _curTabPanel:ActiveTrans(false)
        end
    end

    _curTabIndex = index
    _curTabPanel = tabPanel
    tabPanel:ActiveTrans(true)

    local scriptData = _tabPanelScriptList[_curTabIndex]
    if nil == scriptData then
        scriptData = PanelAttr:GetComponent(_type_LuaBehaviour).scriptData
        _tabPanelScriptList[_curTabIndex] = scriptData

        scriptData.TabFirstSelect(spawnPool, _selectItemData_Hero)
    end

    scriptData.CheckUIUpdate()
end
 
function OnCellSpawn_Hero(trans, index0, isRefresh)
    local index = index0 + 1
    local itemData = _liuliRealmDungeonCache:GetHeroByFormation(index)
 
    local scriptData = trans:GetComponent(_type_LuaBehaviour).scriptData
    scriptData.btn_HeadBg.onClick:RemoveAllListeners()

    --头像
    local headPath = const.path.atlas_home2 .. "prince_common/prince_youth_head_" .. itemData:GetSex() .. ".png"
    scriptData.img_Head:SetResID(headPath, true)
    --等级
    scriptData.txt_Lv.text = itemData:GetLv()
    --点击
    scriptData.btn_HeadBg.onClick:AddListener(function()
        OnItemSelect_Hero(index, itemData, scriptData)
    end)
 
    --选中高亮
    if nil ~= _selectItemData_Hero and _selectItemData_Hero == itemData then
        scriptData.highlight:ActiveTrans(true)
        _selectItemScript_Hero = scriptData --用于手动点击的时候, 把之前的高亮隐藏
    else
        scriptData.highlight:ActiveTrans(false)
    end
end
 
function OnItemSelect_Hero(index, itemData, scriptData)
    if itemData == _selectItemData_Hero then return end
    _selectItemData_Hero = itemData
    _selectItemIndex_Hero = index
 
    --/////点击切换高亮
    if _selectItemScript_Hero and GameUtil.IsValid(_selectItemScript_Hero.self.gameObject) then
        _selectItemScript_Hero.highlight:ActiveTrans(false)
    end
    _selectItemScript_Hero = scriptData
    scriptData.highlight:ActiveTrans(true)
    --/////
 
    UpdateDetailAll_Hero()
end

---左侧选中的列表条目时, 更新右侧详情
function UpdateDetailAll_Hero()
    if nil == _selectItemData_Hero then return end
 
    UpdateDetailMid_Hero()
 
    --左侧切换点击, 右侧tab对应的panel全部需要dirty
    for i=1,3 do
        local scriptData = _tabPanelScriptList[i]
        if nil ~= scriptData then
            scriptData.SetLeftSelectData(_selectItemData_Hero)
            scriptData.SetAllDirty()
            if i == _curTabIndex then
                scriptData.CheckUIUpdate()
            end
        end
    end
end
 
function UpdateDetailMid_Hero()
    if nil == _selectItemData_Hero then return end
 
    --加载模型
    --名字
    txt_HeroName.text = _selectItemData_Hero:GetName()
    txt_Force.text = _selectItemData_Hero:GetForce()
end

function OnEvent_DataChange(data)
    for i=1,3 do --转发给页签
        local scriptData = _tabPanelScriptList[i]
        if nil ~= scriptData and scriptData.OnEvent_DataChange then
            scriptData.OnEvent_DataChange(data)
        end
    end

    local anyChange = false

    if data.princeForceChange then
        anyChange = true
        txt_Force.text = _selectItemData_Hero:GetForce()
    end

    if not anyChange then return end
end

---活动信息[15090]
function OnEvent_15090(data)
    UpdateDetailAll_Hero()
    listView_Hero:RefreshCells()
end

---皇子升级[15093]
function OnEvent_15093(data)
    OnEvent_15107(data)
end

---升级资质[15094]
function OnEvent_15094(data)
    OnEvent_15107(data)
end

---装配技能[15095]
function OnEvent_15095(data)
    OnEvent_15107(data)
end

---属性加点[15097]
function OnEvent_15097(data)
    OnEvent_15107(data)
end

---皇子上阵[15098]
function OnEvent_15098(data)
    local heroVo = _liuliRealmDungeonCache:GetHeroByFormation(_selectItemIndex_Hero)
    --旧的默认选中是否变化
    if _selectItemData_Hero ~= heroVo then
        _selectItemData_Hero = _liuliRealmDungeonCache:GetHeroByFormation(1)
        _selectItemIndex_Hero = 1
        UpdateDetailAll_Hero()
    end

    listView_Hero:RefreshCells()
end

---皇子重置[15107]
function OnEvent_15107(data)
    local princeInfo = data.princeInfo
    if princeInfo then
        if _selectItemData_Hero:GetUid() == princeInfo.princeUid then
            --列表等级会变
            if _selectItemScript_Hero then
                _selectItemScript_Hero.txt_Lv.text = _selectItemData_Hero:GetLv()
            end
            UpdateDetailMid_Hero() --战力会变, 模型动画不变

            for i=1,3 do
                local scriptData = _tabPanelScriptList[i]
                if nil ~= scriptData then
                    scriptData.HeroInfoChange() --皇子重置基本所有ui都会变动
                    if 3 == i then
                        scriptData.Tab1_ResetAddedPoint()
                    end
                    if i == _curTabIndex then
                        scriptData.UpdateAll()
                    end
                end
            end
        end
    end
end

---加点重置[15109]
function OnEvent_15109(data)
    local princeInfo = data.princeInfo
    if princeInfo then
        if _selectItemData_Hero:GetUid() == princeInfo.princeUid then
            UpdateDetailMid_Hero() --战力会变, 模型动画不变

            --只影响第3个界面
            local scriptData = _tabPanelScriptList[3]
            if nil ~= scriptData then
                scriptData.PointInfoChange() --只是天赋点部分的所有ui变动
                if 3 == _curTabIndex then
                    scriptData.UpdateAll()
                end
            end
        end
    end
end

---穿戴装备[15099]
function OnEvent_15099(data)
    UpdateDetailMid_Hero() --战力会变, 动画不变

    for i=1,2 do --第3个页签没有装备相关的
        local scriptData = _tabPanelScriptList[i]
        if nil ~= scriptData then
            scriptData.EquipInfoChange()
            if i == _curTabIndex then
                scriptData.UpdateAll()
            end
        end
    end
end

---升级装备[15096]
function OnEvent_15096(data)
    UpdateDetailMid_Hero() --战力会变, 动画不变

    for i=1,2 do --第3个页签没有装备相关的
        local scriptData = _tabPanelScriptList[i]
        if nil ~= scriptData then
            scriptData.EquipInfoChange()
            if i == _curTabIndex then
                scriptData.UpdateAll()
            end
        end
    end
end

---分解装备[15100]
function OnEvent_15100(data)

end

右侧：属性总览panel

local _spawnPool = nil

local _equipSlotScriptList = {}
local _heroVo = nil ---左侧的英雄列表

local _panelAllDirty = true ---所有ui都要刷新时设为true
local _panelEquipDirty = true ---装备槽ui需要刷新时设为true

local _lvTpl = nil

function Awake()
    btn_Exp.onClick:AddListener(OnClick_Exp)
    btn_Aptitude.onClick:AddListener(OnClick_Aptitude)
    btn_OneKey.onClick:AddListener(OnClick_OneKey)
end

---初始化切左侧选择改变右侧详情不会变化的数据, 以及第1次选中就要用到的数据
function TabFirstSelect(spawnPool)
    _spawnPool = spawnPool
end

function SetLeftSelectData(data)
    _heroVo = data
end

function SetAllDirty()
    _panelAllDirty = true
end

function SetEquipDirty()
    _panelEquipDirty = true
end

function CheckUIUpdate()
    if nil == _heroVo then return end

    if _panelAllDirty then
        _lvTpl = _princeGlazeLvTpl.GetTplByLv(_heroVo:GetLv())
    end

    UpdateLvAndExp()
    UpdateEquip()

    _panelAllDirty = false
end

---等级，经验
function UpdateLvAndExp()
    if not _panelAllDirty then return end

    local curLv = _heroVo:GetLv()
    txt_Lv.text = string.format(_GetGameString("shimen_1_102"), curLv)
    local maxLv = _princeGlazeLvTpl.GetMaxLv()
    if curLv >= maxLv then --满级
        sld_Exp.value = 1
        txt_Exp.text = _GetGameString("rolecultivate_maxLevel2")
    else
        local curExp = _heroVo:GetExp()
        local needExp = _princeGlazeLvTpl.GetNeedExp(_lvTpl)

        sld_Exp.value = curExp / needExp
        txt_Exp.text = curExp .. "/" .. needExp
    end
end

---装备
function UpdateEquip()
    if not _panelAllDirty and not _panelEquipDirty then return end

    for i=1,4 do
        local scriptData = _equipSlotScriptList[i]
        if nil == scriptData then
            local trans = _spawnPool:Spawn("cell_EquipSlot", goEquipContainer.transform)
            trans.gameObject:ActiveTrans(true)
            _TransformUtil.SetLocalPosition(trans, GameUtil.GetVector3(0, 0, 0))
            scriptData = trans:GetComponent(_type_LuaBehaviour).scriptData
            _equipSlotScriptList[i] = scriptData
        end
        UpdateCell_Equip(i, scriptData)
    end

    _panelEquipDirty = false
end

function UpdateCell_Equip(slot, scriptData)
    local equipVo = _heroVo:GetEquipVo(slot)
    scriptData.btn_Add.onClick:RemoveAllListeners()
    scriptData.btn_IconBg.onClick:RemoveAllListeners()

    scriptData.btn_IconBg.onClick:AddListener(function()
        local uiData = {
            princeUid = _heroVo:GetUid(),
            slot = slot,
            equipVo = equipVo,
        }
        SceneMgr.OpenUI({ui_name = "LiuLiRealmDungeon/screenLiuliRealmDungeonEquipTips", data=uiData})
    end)
    --图标
    local iconPath = _princeGlazeEquipTpl.GetIconPath(equipTpl)
    scriptData.img_Icon:SetResID(iconPath, true)
    --等级
    scriptData.txt_Lv.text = string.format(_GetGameString("elf_tips_058"), equipVo:GetLv())
    --名字
    local equipTpl = _princeGlazeEquipTpl.GetTplById(equipVo:GetTplId())
    scriptData.txt_Name.text = _princeGlazeEquipTpl.GetName(equipTpl)
end

function OnEvent_DataChange(data)
    local anyChange = false
    if data.equipLvChange then
        anyChange = true
        _panelEquipDirty = true
    end

    if not anyChange then return end

    if self.gameObject.activeSelf then
        UpdateEquip()
    end
end

右侧：额外加成panel，这个panel也分成了2个页签（天赋点和技能页签）

local _heroVo = nil
local _panelAllDirty = true ---所有ui都要刷新时设为true

local _curTabIndex = 0
local _tabPanelScriptList = {}
local _curTabPanel = nil

--////////// tab1
local _tab1AllDirty = true
local _tab1PointDirty = false

local _tab1AttrAddPointTempTab = nil --- attrType -> point
local _tab1AttrAddPointTempTotal = 0 ---所有属性的加点
local _tab1AttrPointConstTab = nil ---属性加点的一些常量配置
--//////////

--////////// tab2
local _tab2AllDirty = true
local _tab2SkillDirty = false

local _tab2ClickSlot = 0
local _tab2ClickSlotScriptData = nil
local _tab2SkillIdSlotTab = {} ---skillId -> slot
local _tab2CanUseSkillScriptDatas = { 0, 0, 0, 0, 0, 0 }
--//////////

function Awake()
    --gf.utils.event.register(self, eventConst.LiuliRealmDungeon.onsocket_15107, OnEvent_15107)
   
    tog_1.onValueChanged:AddListener(function(isOn) OnValueChanged_Tab(1, isOn, tog_1, panel_Addi) end)
    tog_2.onValueChanged:AddListener(function(isOn) OnValueChanged_Tab(2, isOn, tog_2, panel_Skill) end)
end

function OnValueChanged_Tab(index, isOn, tog, tabPanel)
    if nil == _heroVo then return end
   
    if not isOn then return end
    if _curTabIndex == index then return end

    if nil ~= _curTabPanel then
        local oldTabIndex = _curTabIndex
        local func = self.scriptData["TabUnSelect_" .. oldTabIndex]
        if nil ~= func then
            func()
        end
        if tabPanel ~= _curTabPanel then
            _curTabPanel:ActiveTrans(false)
        end
    end
   
    _curTabIndex = index
    _curTabPanel = tabPanel
    tabPanel:ActiveTrans(true)
   
    local func = self.scriptData["TabSelect_" .. _curTabIndex]
    if nil ~= func then
        func()
    else
        loge("tab no logic: " .. _curTabIndex)
    end
end

---初始化切左侧选择改变右侧详情不会变化的数据, 以及第1次选中就要用到的数据
function TabFirstSelect(spawnPool, heroVo)
    _heroVo = heroVo
    if tog_1.isOn then
        OnValueChanged_Tab(1, true, tog_1, panel_Addi)
    else
        tog_1.isOn = true
    end
end

function SetLeftSelectData(heroVo)
    _heroVo = heroVo
    Tab1_ResetAddedPoint() --左侧列表条目选择切换时, 重置已加的临时点数
end

function SetAllDirty()
    _panelAllDirty = true
    --tab1和tab2的dirty也要设为true, 如果当前在tab1(会被立即更新), 在切换到tab2时被延迟更新
    _tab1AllDirty = true
    _tab2AllDirty = true
end

function HeroInfoChange()
    _panelAllDirty = true
    _tab1AllDirty = true
    _tab2AllDirty = true
end

function PointInfoChange()
    _tab1PointDirty = true
end

function UpdateAll()
    if nil == _heroVo then return end

    if 1 == _curTabIndex then
        Tab1_UpdateAll()
    elseif 2 == _curTabIndex then
        Tab2_UpdateAll()
    end
    _panelAllDirty = false
end

--////////////////////////////// tab1

function TabSelect_1()
    local scriptData = _tabPanelScriptList[1]
    if nil == scriptData then
        scriptData = panel_Addi:GetComponent(_type_LuaBehaviour).scriptData
        _tabPanelScriptList[1] = scriptData
       
        _tab1AttrAddPointTempTab = { 0, 0, 0, 0 }
        scriptData.btn_Tips.onClick:AddListener(Tab1_OnClick_Tip)
        scriptData.btn_Reset.onClick:AddListener(Tab1_OnClick_Reset)
        scriptData.btn_Ok.onClick:AddListener(Tab1_OnClick_Ok)
    end
   
    Tab1_UpdateAll(scriptData)
end

function Tab1_UpdateAll(scriptData)
    if nil == scriptData then
        scriptData = _tabPanelScriptList[1]
        if nil == scriptData then return end
    end
   
    if _panelAllDirty or _tab1AllDirty then
        scriptData.txt_Force.text = _heroVo:GetForce()
    end
    Tab1_UpdatePoint(scriptData)

    _tab1AllDirty = false
end

function Tab1_UpdatePoint(scriptData)
    if not _panelAllDirty and not _tab1AllDirty and not _tab1PointDirty then return end

    if nil == scriptData then
        scriptData = _tabPanelScriptList[1]
        if nil == scriptData then return end
    end

     --属性
     Tab1_UpdateCell_Attr(propsDict["1"], scriptData.attr1)
     Tab1_UpdateCell_Attr(propsDict["3"], scriptData.attr2)
     Tab1_UpdateCell_Attr(propsDict["4"], scriptData.attr3)

    _tab1PointDirty = true
end

function Tab1_UpdateCell_Attr(propInfo, luaB)
    if nil == propInfo then return end
   
    local scriptData = luaB.scriptData
    local attrIconPath = const.path.atlas_home2 .. "LiuliRealmDungeon/prince_attr_"..propInfo.attrType
    --icon
    scriptData.img_AttrIcon:SetResID(attrIconPath, true)
    --属性名
    scriptData.txt_AttrName.text = _GetGameString("prince_attr_"..propInfo.attrType)
end

---重置已加的点
function Tab1_ResetAddedPoint()
    if nil ~= _tab1AttrAddPointTempTab then
        _tab1AttrAddPointTempTab[1] = 0
        _tab1AttrAddPointTempTab[2] = 0
        _tab1AttrAddPointTempTab[3] = 0
        _tab1AttrAddPointTempTab[4] = 0
    end
    _tab1AttrAddPointTempTotal = 0
end

--//////////////////////////////


--////////////////////////////// tab2

function TabSelect_2()
    local scriptData = _tabPanelScriptList[2]
    if nil == scriptData then
        scriptData = panel_Skill:GetComponent(_type_LuaBehaviour).scriptData
        _tabPanelScriptList[2] = scriptData
    end
   
    Tab2_UpdateAll(scriptData)
end

function Tab2_UpdateAll(scriptData)
    if nil == scriptData then
        scriptData = _tabPanelScriptList[2]
        if nil == scriptData then return end
    end

    Tab2_UpdateSkill(scriptData)
   
    _tab2AllDirty = false
end

function Tab2_UpdateSkill(scriptData)
    if not _panelAllDirty and not _tab2AllDirty then return end

    if nil == scriptData then
        scriptData = _tabPanelScriptList[2]
        if nil == scriptData then return end
    end

    if nil ~= _tab2ClickSlotScriptData then
        _tab2ClickSlotScriptData.highlight:ActiveTrans(false)
        _tab2ClickSlotScriptData = nil
    end
    _tab2ClickSlot = 0
   
    --已装配技能
    _tab2SkillIdSlotTab = {}
    for i=1,3 do
        local skillInfo = _heroVo:GetSkillInfoBySlot(i)
        local skillLuaB = scriptData["skill1_"..i]
        if GameUtil.IsNilOrZero(skillInfo) then
            Tab2_UpdateCell_SkillEmpty(skillLuaB, i)
        else
            _tab2SkillIdSlotTab[skillInfo.skillId] = i
            Tab2_UpdateCell_Skill(skillLuaB, i, skillInfo.skillId, skillInfo.skillLv)
        end
    end

    _tab2AllDirty = false
end

--//////////////////////////////

右侧titlenview按钮app-plus

节点指针右侧116

宽度右侧布局浏览器

左右侧圆点按钮js