HarmonyOS 鸿蒙Next中实现swiper tabs
HarmonyOS 鸿蒙Next中实现swiper tabs
swiper 实现 tabs
3 回复
您看以下demo实现可否满足您的要求
@Entry
@Component
struct TabsExample {
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#007DFF'
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
@Builder tabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(10)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
.margin({ top: 17, bottom: 7 })
Divider().strokeWidth(2).color('#007DFF').opacity(this.currentIndex === index ? 1 : 0)
}
.width('20%')//使用百分比
}
build() {
Column() {
Tabs({
barPosition: BarPosition.Start,
index: this.currentIndex,
controller: this.controller
}) {
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor('#00CB87')
}
.tabBar(this.tabBuilder(0, 'green'))
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor('#007DFF')
}
.tabBar(this.tabBuilder(1, 'blue'))
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor('#FFBF00')
}
.tabBar(this.tabBuilder(2, 'yellow'))
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor('#E67C92')
}
.tabBar(this.tabBuilder(3, 'pink'))
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor('#E67C92')
}
.tabBar(this.tabBuilder(4, 'red'))
TabContent() {
Column()
.width('100%')
.height('100%')
.backgroundColor('#E67C92')
}
.tabBar(this.tabBuilder(5, 'black'))
}
.vertical(false)
.barMode(BarMode.Scrollable)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.onChange((index: number) => {
this.currentIndex = index
})
.width(360)
.height(296)
.margin({ top: 52 })
.backgroundColor('#F1F3F5')
}
.width('100%')
}
}
思路没问题，基于GridRow实现基本的布局框架，结合断点设计Swiper的displaycount和indicator，再定义相关联动。
参考：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/typical-scenarios-V5
更多关于HarmonyOS 鸿蒙Next中实现swiper tabs的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中实现Swiper Tabs，可以使用Tabs和Swiper组件。Tabs用于显示标签页的标题，Swiper用于实现滑动切换内容。
首先，在布局文件中定义Tabs和Swiper组件：
<Tabs
id="tabs"
width="100%"
height="50vp"
onchange="onTabChange">
<TabBar>
<TabContent>
<Text>Tab 1</Text>
</TabContent>
<TabContent>
<Text>Tab 2</Text>
</TabContent>
<TabContent>
<Text>Tab 3</Text>
</TabContent>
</TabBar>
</Tabs>
<Swiper
id="swiper"
width="100%"
height="100%"
onchange="onSwiperChange">
<SwiperContent>
<Text>Content 1</Text>
</SwiperContent>
<SwiperContent>
<Text>Content 2</Text>
</SwiperContent>
<SwiperContent>
<Text>Content 3</Text>
</SwiperContent>
</Swiper>
然后在JavaScript文件中实现onTabChange和onSwiperChange方法，以确保Tabs和Swiper的同步：
export default {
onTabChange(e) {
this.$element('swiper').setIndex(e.index);
},
onSwiperChange(e) {
this.$element('tabs').setIndex(e.index);
}
}
这样，当用户点击Tabs时，Swiper会滑动到相应的内容页；当用户滑动Swiper时，Tabs也会切换到对应的标签页。
