TabSegment使用

TabSegment

1. 自定义标签的cell样式

segmentCell(item) {
    HStack()
    .subs(
        ImageView(foodData.segImg)
        .width(20)
        .height(20)
        .contentMode(ContentMode.SCALE_ASPECT_FILL)
        .cornerRadius(20)
        ,
        Label(item.title).fontSize(15)
    )
}

ui{
     TabSegment(foodData.segTitle)
        .animationType(AnimProperty.Scale).from({ 0.8, 0.8 }).to({ 1.5, 1.5 }) 
        --为TabSegment绑定cell，在回调中创建tab
        .bindCell(function(item)
            return segmentCell(item)
        end)
}

local function preview()

    foodData.segImg = "https://s.momocdn.com/w/u/others/custom/MLNUI/icon.png"
   
    foodData.segTitle = {
        { title = "超级暑价" },
        { title = "今日特价" },
        { title = "精美套餐" },
        { title = "发现好店" }
    }
end

2. 自定义tab切换动画

---自定义tab切换动画,若不设置按默认动画。
---animationType: 动画类型，如AnimProperty.Scale等
---from(from): 动画起始状态，table类型
---to(to): 动画终止状态，table类型
注意：若要自定义动画，那么animType、from、to这三个方法必须同时调用

```lua
ui{
    TabSegment(foodData.segTitle)             
        .bindCell(function(item)
            return segmentCell(item)
        end)
        .animationType(AnimProperty.Scale).from({ 0.8, 0.8 }).to({ 1.5, 1.5 })

}

3. 自定义进度条样式

---若不设置则按系统提供的默认进度条。

---自定义绿色的进度条样式

progressBar() {
    Label().width(20).height(5)
    .bgColor(Color(0x228B22)).cornerRadius(20)
}

---
--- UI
ui {
   TabSegment(foodData.segTitle)
        --用setupProgressBar()方法在其回调中设置自定义进度条
        .setupProgressBar(function()
            return progressBar()
        end)
        .bindCell(function(item)
            return segmentCell(item)
        end)
}   

4. 绑定ViewPager，实现联动效果

  --传入ViewPager的ID
  .bindViewPager(vp_food)

点击查看完整Demo

model(foodData)

progressBar() {
    Label().width(20).height(5)
    .bgColor(Color(0x228B22)).cornerRadius(20)
}

segmentCell(item) {
    HStack()
    .subs(
        ImageView(foodData.segImg)
        .width(20)
        .height(20)
        .contentMode(ContentMode.SCALE_ASPECT_FILL)
        .cornerRadius(20)
        ,
        Label(item.title).fontSize(15)
    )
}

viewpagerCell(item) {
    HStack()
    .widthPercent(100)
    .padding(10, 10, 10, 10)
    .subs(
        ImageView(item.img1)
        .widthPercent(48)
        .height(100)
        .contentMode(ContentMode.SCALE_ASPECT_FILL)
        ,
        Spacer()
        ,
        ImageView(item.img2)
        .widthPercent(48)
        .height(100)
        .contentMode(ContentMode.SCALE_ASPECT_FILL)
    )
}
---
--- UI
ui {
    --- layout views

    VStack()
    .widthPercent(100)
    .subs(
        TabSegment(foodData.segTitle)
        .animationType(AnimProperty.Scale).from({ 0.8, 0.8 }).to({ 1.5, 1.5 })
        .setupProgressBar(function()
            return progressBar()
        end)
        .bindCell(function(item)
            return segmentCell(item)
        end)
        .bindViewPager(vp_food)
        ,
        ViewPager().ID(vp_food)
        .widthPercent(100)
        --.setScrollEnable(true)
        .bindData(foodData.list)
        .bindCell(function(item)
            return viewpagerCell(item)
        end)
    )
}

---
--- preview
local function preview()

    foodData.list = {
        { img1 = "https://s.momocdn.com/w/u/others/custom/MLNUI/food1.jpg",
          img2 = "https://s.momocdn.com/w/u/others/custom/MLNUI/food2.jpg" },
        { img1 = "https://s.momocdn.com/w/u/others/custom/MLNUI/food3.jpg",
          img2 = "https://s.momocdn.com/w/u/others/custom/MLNUI/food4.jpg" },
        { img1 = "https://s.momocdn.com/w/u/others/custom/MLNUI/food5.jpg",
          img2 = "https://s.momocdn.com/w/u/others/custom/MLNUI/food6.jpg" },
        { img1 = "https://s.momocdn.com/w/u/others/custom/MLNUI/food7.jpg",
          img2 = "https://s.momocdn.com/w/u/others/custom/MLNUI/food8.jpg" }
    }

    foodData.segImg = "https://s.momocdn.com/w/u/others/custom/MLNUI/icon.png"

    foodData.segTitle = {
        { title = "超级暑价" },
        { title = "今日特价" },
        { title = "精美套餐" },
        { title = "发现好店" }
    }

end

• 运行效果图