HarmonyOS鸿蒙Next中实现卡片轮播示例代码

介绍

本示例使用Swiper（滑块视图容器）实现卡片轮播的功能。

实现卡片轮播源码链接

效果预览

图片名称

使用说明

卡片数据来自预置用例，可根据实际情况自行修改。同时可以初始化偏移量列表。

实现思路

首先设置卡片数据源，以及卡片索引值，之后通过Swiper实现卡片轮播。核心代码如下：

Swiper() {
 LazyForEach(this.data, (item: CardInfo, index: number) => {
   CardComponent({
     cardInfo: item,
     cardTotalLength: this.data.totalCount(),
     cardIndex: index,
     showingCard: this.currentSwiperIndex
   })
 })
}.index($$this.currentSwiperIndex)
 .loop(true)
 .indicator(false)
 .itemSpace(20)
 .displayCount(3)
 .duration(Constants.DURATION)
 .curve(Curve.Friction)
 .onChange((index) => {
   this.currentSwiperIndex = index
 })
 .height('100%')

更多关于HarmonyOS鸿蒙Next中实现卡片轮播示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 1楼•4 天前

在HarmonyOS鸿蒙Next中实现卡片轮播，可以使用PageSlider组件。以下是一个简单的示例代码：

import { PageSlider, PageSliderItem, Text, View } from '@ohos/hmos-ui';

@Entry
@Component
struct CardCarousel {
  private cards: string[] = ['Card 1', 'Card 2', 'Card 3', 'Card 4'];

  build() {
    Column() {
      PageSlider({ loop: true }) {
        ForEach(this.cards, (card: string) => {
          PageSliderItem() {
            View({ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center' }) {
              Text(card)
                .fontSize(30)
                .fontWeight(FontWeight.Bold)
            }
          }
        })
      }
      .height(300)
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

在这个示例中，PageSlider组件用于创建轮播效果，PageSliderItem用于定义每个卡片的内容。通过ForEach循环遍历cards数组，动态生成多个卡片。loop属性设置为true，使得轮播可以循环播放。

更多关于HarmonyOS鸿蒙Next中实现卡片轮播示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 2楼•4 天前

在HarmonyOS鸿蒙Next中，可以通过PageSlider组件实现卡片轮播效果。以下是一个简单的示例代码：

import ohos.agp.components.PageSlider;
import ohos.agp.components.PageSliderProvider;
import ohos.agp.components.Text;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.utils.Color;
import ohos.app.Context;

public class CardSliderProvider extends PageSliderProvider {
    private String[] cards = {"Card 1", "Card 2", "Card 3"};

    @Override
    public int getCount() {
        return cards.length;
    }

    @Override
    public Object createPageInContainer(ComponentContainer parent, int position) {
        Text text = new Text(parent.getContext());
        text.setText(cards[position]);
        text.setTextColor(Color.BLACK);
        text.setTextSize(50);
        parent.addComponent(text);
        return text;
    }

    @Override
    public void destroyPageFromContainer(ComponentContainer parent, int position, Object object) {
        parent.removeComponent((Component) object);
    }

    @Override
    public boolean isPageMatchToObject(Component component, Object object) {
        return component == object;
    }

    public static void main(Context context) {
        DirectionalLayout layout = new DirectionalLayout(context);
        PageSlider pageSlider = new PageSlider(context);
        CardSliderProvider provider = new CardSliderProvider();
        pageSlider.setProvider(provider);
        layout.addComponent(pageSlider);
    }
}

这段代码创建了一个简单的卡片轮播效果，PageSlider用于管理卡片的滑动，CardSliderProvider负责提供卡片内容。