آموزش عملی در مورد توسعه پروژه های خرید Harmonyos با UniAPP: اجرای تصاویر چرخ فلک صفحه اصلی

در مقالات چند روز گذشته ، ما در مورد چگونگی ایجاد پروژه های متقابل پلتفرم ، نحوه انجام طرح بندی های اساسی ، نحوه اجرای میله های ناوبری سفارشی و غیره صحبت کرده ایم. از طریق این سری از آموزش های مقاله ، در نهایت هدف ما دستیابی به یک برنامه خرید هستیم. امروز ، ما قصد داریم در بخش Carousel صفحه اصلی برنامه خرید کار کنیم.
UNIAPP اجزای مربوط به تصاویر چرخ فلک را فراهم می کند و از برنامه های Harmonyos پشتیبانی می کند ، که بسیار مناسب است. بیایید به سادگی یک چرخ فلک با سه صفحه محتوا بنویسیم. ابتدا چرخ فلک و سبک هر عنصر را تعریف کنید:

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

اکنون تصاویر چرخ فلک را در صفحه اضافه کنید:



1


2


3



نگاهی به اثر:

اکنون سعی می کنیم تصاویر را به هر محتوای صفحه اضافه کنیم. در اینجا ، ما یک ماده Swiper را به عنوان نمونه می گیریم:








چنین تصویر اصلی چرخ فلک شکل گرفته است. سپس می توانیم محتوای آن را بیشتر غنی کنیم. در اینجا برخی از ویژگی های متداول که برای شما ذکر شده است:

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

در زیر روشهای استفاده صحیح از ویژگی های فوق و کد کامل چرخ فلک آورده شده است:



















موارد فوق به اشتراک گذاری آموزش در مورد تصاویر چرخ فلک است. از خواندن شما متشکرم