html结构:
uniapp自带的swiper 组件可以弄成寻常的轮播图
<swiper class="image-container" previous-margin="45rpx"
next-margin="45rpx" circular autoplay indicator-dots indicator-color="#9d9080"
indicator-active-color="#fffffb" @change="swiperChange">
<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
v-for="(item, index) in imgList" :key="index" lazy-load
:style="dontFirstAnimation ? 'animation: none;' : ''">
<view class="item" :class="currentIndex == index ? 'item-img' : 'item-img-side'">
<image :src="item" alt=""></image>
</view>
</swiper-item>
</swiper>
JavaScript结构:
export default { data() { return { imgList: [ 'https://cdn.uviewui.com/uview/swiper/swiper1.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper3.png', ], //轮播图图片 currentIndex: 0, dontFirstAnimation: true, Inv: 0, navIndex: 0, indicator: true,
} },
css结构:
.image-container { width: 750rpx; height: 360rpx; } .item { width: 100%; height: 100%; image { width: 100%; height: 340rpx; border-radius: 20rpx; box-shadow: 2px 2px 18px rgba(0, 0, 0, 0.12); } } .item-img { width: 630rpx; height: 340rpx; border-radius: 14rpx; animation: to-big .3s; } .swiper-item { width: 630rpx; height: 340rpx; display: flex; justify-content: center; align-items: center; } .item-img-side { width: 630rpx; height: 298rpx; border-radius: 14rpx; animation: to-mini .3s; } .swiper-item-side { width: 630rpx; height: 298rpx; display: flex; justify-content: center; align-items: center; } @keyframes to-mini { from { height: 340rpx; } to { height: 298rpx; } } @keyframes to-big { from { height: 298rpx; } to { height: 340rpx; } }
最后看看效果
原文地址:https://www.cnblogs.com/huangjunhua/p/16580963.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。