cons…效果预览

this.list.length}getData(index:

number):

this.list[index]}registerDataChangeListener(listener:

DataChangeListener):

{}unregisterDataChangeListener()

}Entry

MyDataSource([])aboutToAppear():

void

{Text(item.toString()).width(90%).height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)},

(item:

item)}.cachedCount(2).index(1).autoPlay(true).interval(4000).indicator(Indicator.digit()

设置数字导航点样式.right(43%).top(200).fontColor(Color.Gray).selectedFontColor(Color.Gray).digitFont({

size:

})).loop(true).duration(1000).itemSpace(0).displayArrow(true,

false)Row({

{this.swiperController.showNext()})Button(showPrevious).onClick(()

{this.swiperController.showPrevious()})}.margin(5)}.width(100%).margin({

top:

Swiper组件绑定onGestureSwipe事件在页面跟手滑动过程中逐帧触发该回调//

性能知识点:

onGestureSwipe属于频繁回调不建议在onGestureSwipe做耗时和冗余操作.onGestureSwipe((index:number,extraInfo:SwiperAnimationEvent){animateTo({duration:

Constants.DURATION_SWIPER,curve:

{//

Constants.GRID_SINGLE_HEIGHT;}})}).onAnimationStart((_:

number,

Constants.DURATION_DOWN_PAGE,curve:

{//

Constants.GRID_SINGLE_HEIGHT;}})}).indicator(new

DotIndicator()//

.selectedItemWidth($r(app.float.swipersmoothvariation_select_item_width)).selectedItemWidth(18fp)//

.selectedItemHeight($r(app.float.swipersmoothvariation_select_item_height)).selectedItemHeight(3vp)//

.itemWidth($r(app.float.swipersmoothvariation_default_item_width)).itemWidth(5vp)//

.itemHeight($r(app.float.swipersmoothvariation_default_item_height)).itemHeight(-3vp)//

.selectedColor($r(app.color.swipersmoothvariation_swiper_selected_color)).selectedColor(Color.Yellow)//

.color($r(app.color.swipersmoothvariation_swiper_unselected_color))).color(#FFFF8662))逻辑结构相对复杂请查看下面

demo

{Swiper(this.swiperController){//

TODO

高性能知识点此处为了演示场景列表数量只有3个使用ForEach列表数量较多的场景推荐使用LazyForEach组件复用缓存列表项实现ForEach(this.swiperData,(item:Resource){Column(){//

TODO

知识点将swiper区域分割成内容区和空白区Image(item).width(100%).height(22%).borderRadius(10)Column().width(100%).height(50).backgroundColor(Color.Gray)}})}.width(95%).loop(true).autoPlay(true)//

TODO

知识点通过indicator属性将导航点放置到空白区域实现指示器导航点位于swiper下方的效果.indicator(new

DotIndicator().bottom(15))}.height(100%).width(100%).justifyContent(FlexAlign.Center)四、Swiper组件实现容器视图居中完全展示两边等长露出跟随手指滑动

逻辑简约描述

在实际的开发过程中因为单位的马虎导致即使代码是一样的也出现过多次错位等问题

比较烧脑准备两罐红牛缓解疲劳蛤

index.*/calculateOffset(target:

number)

${index});this.calculateOffset(index);}).onGestureSwipe((index,

event)

所以手指能够滑动的最大距离this.displayWidth所带来的偏移量即为

易得公式卡片实时偏移量

之后的计算原理相同将不再赘述。

*/this.cardsOffset[index]

(-currentOffset

maxOffset;}}}).onAnimationStart((index,

targetIndex)

{this.calculateOffset(targetIndex);})五、收尾两侧都有等长偏移的露出

build()

}){Image(item).width(80%).height(100%).alignSelf(ItemAlign.Center)}.width(100%).offset({

}).zIndex(index

Math.abs(this.getImgOffset(index))).height(index

this.currentIndex

PanDirection.Horizontal}).onActionStart((event:

GestureEvent)

{this.setAnim(false)}}})).onClick(()

{})})}.height(50%).width(100%).alignContent(Alignment.Center).clip(true)

//裁剪超出

左侧的层叠部分.backgroundColor(Color.Gray).padding({left:

10,right:

16})}.height(100%).width(100%).justifyContent(FlexAlign.Start)}/***

计算偏移量*

returns*/calculateOffset(index:

number):

duration动画持续时间**/setAnim(isLeft:boolean){let

dataLength:

{this.translateList[this.currentIndex]

-350tempIndex

dataLengththis.translateList[this.currentIndex]

0}})}