Practical Tutorial on Developing HarmonyOS Shopping Projects with Uniapp: Implementing Home Page Carousel Images

In the past few days' articles, we have talked about how to create cross-platform projects, how to carry out basic layouts, how to implement custom navigation bars, etc. Through this series of article tutorials, we ultimately aim to achieve a shopping app. Today, we are going to work on the carousel section of the shopping app's home page.
uniapp provides the corresponding component swiper for carousel images, and it supports HarmonyOS applications, which is very convenient. Let's simply write a carousel with three pages of content. First, define the carousel and the style of each element:

.swiper{
width: 100%;
height: 140px;
}
.swiper-item{
width: 100%;
height: 100%;
display: block;
}

Now add carousel images on the page:

<swiper class="swiper">
<swiper-item>
<view class="swiper-item" style="background-color: red;">1</view>
</swiper-item>
<swiper-item>
<view class="swiper-item" style="background-color: yellow;">2</view>
</swiper-item>
<swiper-item>
<view class="swiper-item" style="background-color: green;">3</view>
</swiper-item>
</swiper>

Take a look at the effect:

Now we try to add pictures to each page content. Here, we take a swiper-item as an example:

<swiper-item>
<view class="swiper-item" >
<image src="/static/banner1.jpg" style="width: 100%;height: 100%;"></image>
</view>
</swiper-item>


Such a basic carousel image has taken shape. Then we can further enrich its content. Here are some commonly used attributes listed for you:

indicator-dots：Whether to display the panel indicator points
indicator-color： Indicator point color
indicator-active-color： The color of the currently selected indicator point
autoplay：Whether to switch automatically
interval：Automatically switch the time interval

Below are the correct usage methods of the above attributes and the complete code of the carousel:

<swiper class="swiper" indicator-dots="true" indicator-color="#f8f8f8" indicator-active-color="#007aff" duration="3000" autoplay="true">
<swiper-item>
<view class="swiper-item" >
<image src="/static/banner1.jpg" style="width: 100%;height: 100%;"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item" >
<image src="/static/banner2.jpg" style="width: 100%;height: 100%;"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item" >
<image src="/static/banner3.jpg" style="width: 100%;height: 100%;"></image>
</view>
</swiper-item>
</swiper>

The functions of the carousel in the uniapp project are far from limited to this. It also supports customizing the sliding direction of the carousel, the switching time of the animation, setting the rebound effect, setting whether gesture operation is supported, and many other rich functions. Let’s introduce them one by one below
vertical sliding property: vertical
Is there a rebound effect: bounces
Whether gesture operation is supported: disable-touch
Animation transition time: duration
In addition, the swiper component can also be nested with the list component to achieve more diverse page effects, such as:

<swiper style="flex: 1;" :current="currentIndex">
          <swiper-item v-for="index in 3">
            <list-view>
                <list-item>嵌套组件</list-item>
            </list-view>
          </swiper-item>
    </swiper>

The above are the common usage methods of carousel images when developing HarmonyOS with uniapp. Thank you for your reading.