首页 > 其他分享 >HarmonyOS开发之Swiper页面布局

HarmonyOS开发之Swiper页面布局

时间:2024-09-12 13:23:33浏览次数:14  
标签:index SCALE MIN number HarmonyOS scaleArray Swiper 页面

在HarmonyOS NEXT中使用Swiper组件进行页面布局时,为了提供更好的用户体验,我们可以实现一些自定义的动画效果以及自定义指示器。以下是两个具体的实现方案:

场景一:Swiper页面支持自定义动画

要实现Swiper页面支持自定义动画,我们需要设置Swiper组件的属性,并添加相应的事件处理程序来控制页面之间的过渡效果。

@Entry
@Component
struct CustomSwiperPage {
    private currentIndex: number = 0;
    private scaleArray: number[] = [];
    private startSwiperOffset: number = 0;
    private MAX_SCALE: number = 1.0; // 最大缩放值
    private MIN_SCALE: number = 0.7; // 最小缩放值
    private DRAGGING_MAX_DISTANCE: number = 200; // 拖拽的最大距离用于计算缩放值

    build() {
        Swiper()
            .nextMargin(50)
            .prevMargin(50)
            .displayMode(SwiperDisplayMode.STRETCH)
            .onChange((index) => {
                console.info('changeIndex: ' + index);
                this.currentIndex = index;
                this.scaleArray[this.currentIndex] = this.MAX_SCALE;
                if (this.currentIndex === 0) {
                    this.scaleArray[this.scaleArray.length - 1] = this.MIN_SCALE;
                } else {
                    this.scaleArray[this.currentIndex - 1] = this.MIN_SCALE;
                }

                if (this.currentIndex === this.scaleArray.length - 1) {
                    this.scaleArray[0] = this.MIN_SCALE;
                } else {
                    this.scaleArray[this.currentIndex + 1] = this.MIN_SCALE;
                }
            })
            .customContentTransition({
                timeout: 1000,
                transition: (proxy) => {
                    if (this.startSwiperOffset === 0) {
                        this.startSwiperOffset = proxy.position * proxy.mainAxisLength;
                        console.info('startSwiperOffset: ' + this.startSwiperOffset);
                    }
                    let offset: number = proxy.position * proxy.mainAxisLength;
                    let currentScale: number = this.scaleArray[proxy.index];
                    let nextIndex = (proxy.index === this.scaleArray.length - 2 ? 0 : proxy.index + 1);
                    let preIndex = (proxy.index === 0 ? this.scaleArray.length - 2 : proxy.index - 1);
                    let nextScale: number = this.scaleArray[nextIndex];
                    let preScale: number = this.scaleArray[preIndex];

                    let distance = Math.abs(offset);
                    currentScale = this.MAX_SCALE - Math.min(distance / this.DRAGGING_MAX_DISTANCE, this.MAX_SCALE - this.MIN_SCALE);

                    if (this.startSwiperOffset > offset) {
                        nextScale = this.MIN_SCALE + Math.min(distance / this.DRAGGING_MAX_DISTANCE, this.MAX_SCALE - this.MIN_SCALE);
                        preScale = this.MIN_SCALE;
                    } else {
                        preScale = this.MIN_SCALE + Math.min(distance / this.DRAGGING_MAX_DISTANCE, this.MAX_SCALE - this.MIN_SCALE);
                        nextScale = this.MIN_SCALE;
                    }

                    this.scaleArray[this.currentIndex] = currentScale;
                    this.scaleArray[nextIndex] = nextScale;
                    this.scaleArray[preIndex] = preScale;
                }
            });
    }
}
场景二:Swiper指示器距离底部位置

为了将Swiper的指示器放在距离底部特定位置,可以将Swiper分成两部分:内容区和指示器区。

@Entry
@Component
struct SwiperPageWithCustomIndicator {
    private bannerInfo: number[] = [1, 2, 3, 4];
    private dataList: Color[] = [Color.Gray, Color.Yellow, Color.Blue, Color.Pink, Color.Orange];

    build() {
        Column() {
            Swiper() {
                ForEach(this.bannerInfo, (item: number, index: number) => {
                    Column() {
                        Column() // Swiper内容区域
                            .width("100%")
                            .height(200)
                            .borderRadius("8vp")
                            .backgroundColor(this.dataList[index]);
                        Column() // 指示点区域
                            .width('100%')
                            .height(35)
                            .indicator(
                                new DotIndicator()
                                    .bottom(5)
                                    .itemWidth("8vp")
                                    .itemHeight("8vp")
                                    .selectedItemWidth("10vp")
                                    .selectedItemHeight("10vp")
                                    .color(Color.Green)
                                    .selectedColor(Color.Orange)
                            );
                    }
                });
            }
            .cachedCount(2)
            .autoPlay(true)
            .interval(3000)
            .vertical(false)
            .loop(true)
            .margin({ left: "16vp", right: "16vp" });
        }
    }
}
场景三:Swiper自定义指示器

目前Swiper自带的指示器位置限定比较固定,不能完全靠底部、左边或者右边以及不能调整指示器中间间距,因此可以考虑自定义指示器,将指示器位置定位到我们所需的地方。

方案:

给Swiper自带指示器设置.indicator(false),然后在Swiper组件下面写一个自定义的指示器。

// 自定义指示器,可以通过定位

Row() {

ForEach(this.data, (item: string, index: number) => {

Column()

.width(this.currentIndex === index ? 10 : 5)

.height(5)// 设置指示点中间间距

.margin(5)

.borderRadius(5)

.backgroundColor(Color.Green)

.backgroundColor(this.currentIndex === index ? Color.Red : Color.Gray)

}, (item: string) => item)

}

//设置指示点距离Swiper上下的距离

.margin({ top: 5 })



// 设置指示点在Swiper的左边或者右边或者其他地方

// .position({x:0,y:300})

标签:index,SCALE,MIN,number,HarmonyOS,scaleArray,Swiper,页面
From: https://blog.51cto.com/u_15171169/11990927

相关文章

  • 鸿蒙HarmonyOS Next应用开发实战学习路线
    ✍️作者简介:小北编程(专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向)......
  • 鸿蒙HarmonyOS装饰器详解
    ✍️作者简介:小北编程(专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向)......
  • pbootcms后台公司信息的内容如何调用到前台页面上
    {pboot:companyname}公司名称{pboot:companyaddress}公司地址{pboot:companypostcode}邮政编码{pboot:companycontact}联系人{pboot:companymobile}联系手机{pboot:companyphone}联系电话{pboot:companyfax}传真号码{pboot:companyemail}联系邮箱......
  • html+css网页设计 旅游 雪花旅行社5个页面
    html+css网页设计旅游雪花旅行社5个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1,访问该网站https://download.csdn.net/download/qq_42......
  • 微信小程序开发系列7----页面配置--WXML的include用法
       传递变量   模板不能引用 ......
  • 实战05-Banner(Swiper)
    import{IBannerItem,IBannerList}from'../../api/models/HomeData';@ComponentexportdefaultstructSwiperLayout{@PropbannerList:IBannerList;build(){Swiper(){ForEach(this.bannerList,(banner:IBannerItem)=>{......
  • HarmonyOS NEXT 瀑布流容器 - WaterFlow
    WaterFlow简介官方:瀑布流容器,由“行”和“列”分割的单元格所组成,通过容器自身的排列规则,将不同大小的“项目”自上而下,如瀑布般紧密布局。通俗:规定好子组件的基本样式(不设置高度),遍历数据列表,子组件的高度由数据内容撑开。第二行排列由上一行高度最低的开始排列,形成参差......
  • 五星级可视化页面(04):城市鸟瞰地图,恢宏大气。
    今天继续分享五星级可视化大屏界面,本期分享城市3D鸟瞰图的,非常的恢宏大气。  ......
  • 五星级可视化页面(15):各类医疗场景下大屏页面
    可视化大屏在医疗领域有许多重要的价值和应用:1.数据监控和实时展示:可视化大屏可以用于监控医疗设备、患者数据、手术过程等,实时展示医疗数据的变化和趋势,帮助医护人员及时发现异常情况并做出相应的处理。2.医院运营管理:可视化大屏可以展示医院的运营数据,包括门诊量、......
  • vue2+swiper 纵向弧形滚动效果
    很垃圾的弧形轮播效果,其实不算弧形,只是一个爬坡效果,最终否了但保留一下配置项的代码。。方案1:swiperOptions:{direction:"vertical",spaceBetween:-80,slidesPerView:5,loop:true,centeredSlides:true,//当前的activesl......