实现方法基本思路:
一、首先正常使用swiper组件
二、使用swiper组件的autoplay、circular、previous-margin、next-margin、display-multiple-items等属性实现普通间距轮播
三、将swiper的change、current属性与uni.createAnimation这个API相结合,实现中间高两边低的间距轮播效果
效果图 | |
普通轮播: | 中间高两边低的间距轮播: |
![]() | ![]() |
中间高两边低的间距轮播代码:
<template>
<view class="wrapper">
<view class="bg-change-box">
<image class="full-bg-img" :src="imgUrls[current]" mode=""></image>
</view>
<view class="main-content">
<view class='test'>
<swiper display-multiple-items='1' circular='true' previous-margin='50px' next-margin='50px' autoplay
@change='change' :current='current'>
<block v-for="(item,i) in imgUrls" :key='i'>
<swiper-item>
<view class="box" :animation="i == current ? animationData:animationData2">
<image :src='item'></image>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view style="height: 60vh;" class="">
其他要添加的内容
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
animation: {},
type: "bottom",
title: '首页',
imgUrls: [
'../../static/pic(1).jpg',
'../../static/pic(2).jpg',
'../../static/pic(3).jpg'
],
current: 0,
animationData: {},
animationData2: {},
communityWorks: [
1, 2, 3, 4, 5, 6
],
}
},
onShow() {},
onLoad() {
this.stretch("580rpx")
this.shrink("520rpx")
},
onHide() {
this.close()
uni.showTabBar()
},
onUnload() {
this.close()
uni.showTabBar()
},
methods: {
change(e) {
this.current = e.detail.current
this.stretch("580rpx")
this.shrink("520rpx")
},
// 收缩
stretch(h) {
var animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
animation.height(h).step()
this.animationData = animation.export()
},
// 展开
shrink(h) {
var animation2 = uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation2 = animation2
animation2.height(h).step()
this.animationData2 = animation2.export()
},
}
}
</script>
<style lang="scss">
.logo {
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
.wrapper {
position: relative;
.bg-change-box {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
.full-bg-img {
width: 100%;
height: 100vh;
}
}
}
.main-content {
width: 100%;
background-color: rgba(0, 0, 0, .8);
.test {
width: 100%;
height: 640rpx;
box-sizing: border-box;
swiper {
height: 100%;
}
swiper-item {
text-align: center;
border-radius: 30rpx;
image {
border-radius: 30rpx;
width: 100%;
height: 100%;
}
}
.box {
width: 85%;
height: 500rpx;
display: inline-block;
box-sizing: border-box;
position: relative;
top: 49%;
transform: translateY(-45%);
border-radius: 30rpx;
}
}
}
</style>
普通间距轮播:只需要去除代码中swiper的@change和current属性,对应的方法代码直接删除即可。
结尾:打开官网,可以看到单位设置可以是多样的,可以直接按需设置
官网链接:
该文章参考:【小程序】小程序swiper组件实现间距轮播_uniapp swiper间距轮播_Y__Cheng的博客-CSDN博客
该文章仅作为个人笔记记录,如有其他版权问题,请及时联系文主删除