【关键字】
swiper / 滑块视图容器 / indicator / 指示器 / 单独 / 不显示
【问题描述】
swiper能否单独设置某个item不显示指示器?
【解决方案】
建议写一段色块遮挡代码以设置item不显示指示器。
具体示例代码如下:
// xxx.ets
class MyDataSource implements IDataSource {
private list: number[] = []
private listener: DataChangeListener
constructor(list: number[]) {
this.list = list
}
totalCount(): number {
return this.list.length
}
getData(index: number): any {
return this.list[index]
}
registerDataChangeListener(listener: DataChangeListener): void {
this.listener = listener
}
unregisterDataChangeListener() {
}
}
@Entry
@Component
struct SwiperExample {
private swiperController: SwiperController = new SwiperController()
private data: MyDataSource = new MyDataSource([])
@State num:number=0
aboutToAppear(): void {
let list = []
for (var i = 1; i <= 10; i++) {
list.push(i.toString());
}
this.data = new MyDataSource(list)
}
build() {
Column({ space: 5 }) {
if(this.num==0){//色块遮挡
Text('')
.width('200')
.height(20)
.zIndex(100)
.backgroundColor(0xAFEEEE)
.textAlign(TextAlign.Center)
.fontSize(30)
.position({x:100,y:130})
}
Swiper(this.swiperController) {
LazyForEach(this.data, (item: string,index:number) => {
Text(item)
.width('90%')
.height(160)
.backgroundColor(0xAFEEEE)
.textAlign(TextAlign.Center)
.fontSize(30)
}, item => item)
}
.cachedCount(10)
.index(0)
.autoPlay(false)
.interval(4000)
.loop(true)
.duration(1000)
.itemSpace(0)
.curve(Curve.Linear)
.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
this.num=targetIndex
})
}.width('100%')
.margin({ top: 5 })
}
}