TabSegmentDemo.ag

copy下面代码，运行试试

model(foodData)

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

animScale() {
    type = Scale,
    from = {0.6,0.6},
    to = {0.7,0.7},
    duration = 2,
    delay = 0,
    start = true
}

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(AnimType.animScale)
        .setupProgressBar(function()
            return progressBar()
        end)
        .bindCell(function(item)
            return segmentCell(item)
        end)
        .bindViewPager(vp_food)
        ,
        ViewPager().ID(vp_food)
        .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