啥,ui叫我做一个移动端好看的轮播--异形的Slide

本文主要是介绍啥,ui叫我做一个移动端好看的轮播--异形的Slide，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先看效果,得实现两边的缩放和无线滚动

实现方法

我的基础架构是 next.js+swiper

下载swiper包

yarn add swiper

下载后在页面中引用

import { useEffect, useState } from "react";
import styles from "./index.module.css";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCreative, Autoplay } from "swiper/modules";
import { getSixActivity } from "@/api/pages";
import { ActiveType } from "@/interface/pages";
import { useRouter } from "next/router";
const Active = () => {const [activeContent, SetActiveContent] = useState<ActiveType[]>([0,0,0,0,0,0]);return (<div className={styles.contain}><div className={styles.top_title}>热门活动</div><div className={styles.main}><Swiperstyle={{ height: "239px" }}loop={true} //设置循环轮播className="mySwiper"spaceBetween={-200} //设置堆叠轮播，item之间叠的距离slidesPerView="auto" //设置显示的数量modules={[Autoplay, EffectCreative]}autoplay={true}grabCursor={true}effect={"creative"} //modules上加了同时要设置centeredSlides={true} // 居中的slide是否标记为active，默认是最左active,这样样式即可生效slideToClickedSlide={false} // 点击的slide会居中creativeEffect={{prev: {//这里是设置当前item的前一项的具体属性translate: [-200, 0, 0], //偏移量，三个轴，X、Y、Zscale: 0.8, //缩放量},next: {translate: [200, 0, 0],scale: 0.8,},limitProgress: 2,}}>{activeContent?.map((item, index) => (<SwiperSlide key={index} style={{ width: 360 }}><divclassName={styles.swiper}></div></SwiperSlide>))}</Swiper></div></div>);
};
export default Active;

css文件

.contain {width: 100%;height: 445px;background: #0e62ff;display: flex;flex-direction: column;align-items: center;
}.top_title {margin-top: 24px;margin-bottom: 27px;font-size: 24px;font-weight: bold;color: #ffffff;
}.main {width: calc(100% - 54px);height: 270px;overflow: hidden;
}.content {/* width: 206px; */height: 239px;
}.swiper {margin-left: 21%;width: 58%;height: 100%;border-radius: 4px;background: #ffffff;overflow: hidden;
}.swiper_tag {margin-left: 10px;margin-top: 5px;font-size: 10px;color: #ffffff;width: 62px;height: 20px;text-align: center;line-height: 20px;border-radius: 4px;background: linear-gradient(102deg, #277afe 10%, #0256ff 113%);
}.swiper_tag_1 {margin-left: 10px;margin-top: 5px;font-size: 10px;color: #ffffff;width: 62px;height: 20px;text-align: center;line-height: 20px;border-radius: 4px;background: #20cfff;
}.swiper_tag_2 {margin-left: 10px;margin-top: 5px;font-size: 10px;color: #ffffff;width: 62px;height: 20px;text-align: center;line-height: 20px;border-radius: 4px;background: #ff9549;
}.swiper_title {width: 100%;height: 40px;padding: 0 11px;margin-top: 4px;line-height: 20px;font-size: 14px;color: #16273b;overflow: hidden;text-overflow: ellipsis;word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}.swiper_time {font-size: 10px;margin-top: 10px;margin-left: 11px;color: #afb6bd;
}

这篇关于啥,ui叫我做一个移动端好看的轮播--异形的Slide的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---