项目开发创建新的应用
代码实现
build() { // 超出屏幕，可滚动 Scroll() { // 图片列表 Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center, alignContent: FlexAlign.Center }) { ForEach(this.imageList, (item, index) => { // 循环图片 Image(item.url) .width(item.width) .height(item.height) .opacity(item.opacity) .onClick(() => { // 保存点击的id if (this.currentId === 0) { this.currentId = item.id this.currentIndex = this.currentId - 1 this.isBig = true } else { this.currentId = 0 this.currentIndex = -2 this.isBig = false } this.changeList() }) // 滑动事件 .gesture(PanGesture({ direction: PanDirection.Horizontal }) .onActionStart((e: GestureEvent) => { // 左右滑动开始 // 保存开始的坐标 if (!this.isBig) return false this.startX = e.offsetX }) .onActionEnd((e: GestureEvent) => { // 左右滑动结束 // 计算左滑还是右滑，初始化开始坐标 if (!this.isBig) return false this.isSlideL = e.offsetX - this.startX > 0 ? false : true this.startX = 0 this.showAnimate() }) ) .border({ width: 2, radius: 2, color: '#fff' }) }) }.width('100%') } } 数据处理
// 点击图片，将点击的图片放大，其他缩小 changeList() { this.imageList = this.imageList.map((item) => { const newI = item if (item.id === this.currentId && this.isBig) { newI.width = '100%' newI.height = '100%' newI.opacity = 1 } else if (item.id !== this.currentId && this.isBig) { newI.width = '0%' newI.height = 0 newI.opacity = 0 } else { newI.width = '50%' newI.height = 200 newI.opacity = 1 } return newI }) }// 左右滑动，改变图片的透明度 showAnimate() { // 计算下一个图片的index序列 let nextIndex = this.currentIndex if (!this.isSlideL) { nextIndex -= 1 } else { nextIndex = 1 } nextIndex = nextIndex === this.imageList.length ? 0 : (nextIndex === -1 ? (this.imageList.length - 1) : nextIndex) // 将下一个图片序列赋值给当前的序列 this.currentIndex = nextIndex this.imageList = this.imageList.map((item, index) => { const newI = item if (nextIndex === index) { newI.opacity = 1 newI.width = '100%' newI.height = '100%' } else { newI.opacity = 0 newI.width = '0%' newI.height = '0%' } return newI }) } 方舟开发框架声明式编程很符合接下来前端的趋势，希望框架能越来越完善。
花粉社群VIP加油站
关于作者
猜你喜欢
