网站搭建软件d,西工网站建设设计,网站页面外链怎么做,公司有必要做官网吗下拉刷新页 代码说明
这一页第一次运行时很卡#xff0c;就是你点击修改#xff0c;要等一会才出来#xff0c;加一句#xff0c;修改的字样原来应是修车二字。只能将错就错。
const TopHeight 200;
Component
export default struct Car {State list: Arraynumber就是你点击修改要等一会才出来加一句修改的字样原来应是修车二字。只能将错就错。
const TopHeight 200;
Component
export default struct Car {State list: Arraynumber []// 列表y坐标偏移量State offsetY: number 0// 按下的y坐标private downY 0// 上一次移动的y坐标private lastMoveY 0// 当前列表首部的索引private startIndex 0// 当前列表尾部的索引private endIndex 0// 下拉刷新的布局高度private pullRefreshHeight 70// 下拉刷新文字下拉刷新、松开刷新、正在刷新、刷新成功State pullRefreshText: string 下拉刷新// 下拉刷新图标与文字对应State pullRefreshImage: Resource $r(app.media.pullrefresh)// 是否可以刷新未达到刷新条件收缩回去private isCanRefresh false// 是否正在刷新刷新中不进入触摸逻辑private isRefreshing: boolean false// 是否已经进入了下拉刷新操作private isPullRefreshOperation false// 上拉加载的布局默认高度private loadMoreHeight 70// 上拉加载的布局是否显示State isVisibleLoadMore: boolean false// 是否可以加载更多private isCanLoadMore false// 是否加载中加载中不进入触摸逻辑private isLoading: boolean false// 自定义下拉刷新布局Builder CustomPullRefreshLayout(){Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {Image(this.pullRefreshImage).width(18).height(18)Text(this.pullRefreshText).margin({ left: 7, bottom: 1 }).fontSize(17)}.width(100%).height(this.pullRefreshHeight)// 布局跟着列表偏移量移动.offset({ x: 0, y: ${vp2px(-this.pullRefreshHeight) this.offsetY}px })}// 自定义加载更多布局Builder CustomLoadMoreLayout(){Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {Image($r(app.media.refreshing)).width(18).height(18)Text(加载更多中...).margin({ left: 7, bottom: 1 }).fontSize(17)}.width(100%).height(this.loadMoreHeight).backgroundColor(#f4f4f4).visibility(this.isVisibleLoadMore ? Visibility.Visible : Visibility.None)}// 刷新测试数据private refreshData(){this.list []for (var i 0; i 15; i) {this.list.push(i)}}// 加载更多测试数据private loadMoreData(){let initValue this.list[this.list.length-1] 1for (var i initValue; i initValue 10; i) {this.list.push(i)}}build() {Column() {// 下拉刷新布局this.CustomPullRefreshLayout()// 列表布局List() {ForEach(this.list, item {ListItem() {Column() {Text(Item ${item}).padding(15).fontSize(18)}}}, item item.toString())// 加载更多布局ListItem(){this.CustomLoadMoreLayout()}}.backgroundColor(Color.White) // 背景.divider({ color: #e2e2e2, strokeWidth: 1 }) // 分割线.edgeEffect(EdgeEffect.None) // 去掉回弹效果.offset({ x: 0, y: ${this.offsetY - TopHeight}px }) // touch事件计算的偏移量单位是px记得加上单位.onScrollIndex((start, end) { // 监听当前列表首位索引console.info(${start}startend${end})this.startIndex startthis.endIndex end})}.width(100%).height(100%).backgroundColor(#f4f4f4).onTouch((event) this.listTouchEvent(event))// 父容器设置touch事件当列表无数据也可以下拉刷新.onAppear(() {this.refreshData()})}// 触摸事件listTouchEvent(event: TouchEvent){switch (event.type) {case TouchType.Down: // 手指按下// 记录按下的y坐标this.downY event.touches[0].ythis.lastMoveY event.touches[0].ybreakcase TouchType.Move: // 手指移动// 下拉刷新中 或 加载更多中不进入处理逻辑if(this.isRefreshing || this.isLoading){console.info(Move刷新中返回)return}// 判断手势let isDownPull event.touches[0].y - this.lastMoveY 0// 下拉手势 或 已经进入了下拉刷新操作if ((isDownPull || this.isPullRefreshOperation) !this.isCanLoadMore) {this.touchMovePullRefresh(event)} else {this.touchMoveLoadMore(event)}this.lastMoveY event.touches[0].ybreakcase TouchType.Up: // 手指抬起case TouchType.Cancel: // 触摸意外中断来电界面// 刷新中 或 加载更多中不进入处理逻辑if(this.isRefreshing || this.isLoading){console.info(Up刷新中返回)return}if (this.isPullRefreshOperation) {this.touchUpPullRefresh()} else {this.touchUpLoadMore()}break}}//下拉刷新// 手指移动处理下拉刷新touchMovePullRefresh(event:TouchEvent){// 当首部索引位于0if (this.startIndex 0) {this.isPullRefreshOperation true// 下拉刷新布局高度var height vp2px(this.pullRefreshHeight)// 滑动的偏移量this.offsetY event.touches[0].y - this.downY// 偏移量大于下拉刷新布局高度达到刷新条件if (this.offsetY height) {// 状态1松开刷新this.pullRefreshState(1)// 偏移量的值缓慢增加this.offsetY height this.offsetY * 0.15} else {// 状态0下拉刷新this.pullRefreshState(0)}if (this.offsetY 0) {this.offsetY 0this.isPullRefreshOperation false}}}// 手指抬起处理下拉刷新touchUpPullRefresh(){// 是否可以刷新if (this.isCanRefresh) {console.info(执行下拉刷新)// 偏移量为下拉刷新布局高度this.offsetY vp2px(this.pullRefreshHeight)// 状态2正在刷新this.pullRefreshState(2)// 模拟耗时操作setTimeout(() {this.refreshData()this.closeRefresh()}, 2000)} else {console.info(关闭下拉刷新未达到条件)// 关闭刷新this.closeRefresh()}}// 下拉刷新状态// 0下拉刷新、1松开刷新、2正在刷新、3刷新成功pullRefreshState(state:number){switch (state) {case 0:// 初始状态this.pullRefreshText 下拉刷新this.pullRefreshImage $r(app.media.pullrefresh)this.isCanRefresh falsethis.isRefreshing falsebreak;case 1:this.pullRefreshText 松开刷新this.pullRefreshImage $r(app.media.reset)this.isCanRefresh truethis.isRefreshing falsebreak;case 2:this.offsetY vp2px(this.pullRefreshHeight)this.pullRefreshText 正在刷新this.pullRefreshImage $r(app.media.refreshing)this.isCanRefresh truethis.isRefreshing truebreak;case 3:this.pullRefreshText 刷新成功this.pullRefreshImage $r(app.media.ic_refresh_succeed)this.isCanRefresh truethis.isRefreshing truebreak;}}// 关闭刷新closeRefresh() {// 如果允许刷新延迟进入为了显示刷新中setTimeout(() {var delay 50if (this.isCanRefresh) {// 状态3刷新成功this.pullRefreshState(3)// 为了显示刷新成功延迟执行收缩动画delay 500}animateTo({duration: 150, // 动画时长delay: delay, // 延迟时长onFinish: () {// 状态0下拉刷新this.pullRefreshState(0)this.isPullRefreshOperation false}}, () {this.offsetY 0})}, this.isCanRefresh ? 500 : 0)}//加载更多// 手指移动处理加载更多touchMoveLoadMore(event:TouchEvent) {// 因为加载更多是在列表后面新增一个item当一屏能够展示全部列表endIndex 为 length1if (this.endIndex this.list.length - 1 || this.endIndex this.list.length) {// 滑动的偏移量this.offsetY event.touches[0].y - this.downYif (Math.abs(this.offsetY) vp2px(this.loadMoreHeight)/2) {// 可以刷新了this.isCanLoadMore true// 显示加载更多布局this.isVisibleLoadMore true// 偏移量缓慢增加this.offsetY - vp2px(this.loadMoreHeight) this.offsetY * 0.1}}}// 手指抬起处理加载更多touchUpLoadMore() {animateTo({duration: 200, // 动画时长}, () {// 偏移量设置为0this.offsetY 0})if (this.isCanLoadMore) {console.info(执行加载更多)// 加载中...this.isLoading true// 模拟耗时操作setTimeout(() {this.closeLoadMore()this.loadMoreData()}, 2000)} else {console.info(关闭加载更多未达到条件)this.closeLoadMore()}}// 关闭加载更多closeLoadMore() {this.isCanLoadMore falsethis.isLoading falsethis.isVisibleLoadMore false}}
