uni-app封裝折疊輪播組件
先來看效果圖
實(shí)現(xiàn)原理：
通過小程序的觸摸事件，來控制圖片數(shù)組的變化實(shí)現(xiàn)動(dòng)態(tài)樣式；來改變圖片的樣式。
貼上輪播組件完整代碼
<template>
<view :style="{ height: height+'px' }" class="box">
<view class="swiper-container">
<view
class="swiper-item"
v-for="(item, index) in list" :key="index"
@tap="imageTap(item)"
@touchstart="touchStart"
@touchend="touchEnd"
:style="{filter:styleList[index].filter, transform: styleList[index].transform, zIndex: styleList[index].zIndex, opacity: styleList[index].opacity,display:styleList[index].display}">
<view class="wrap">
<image class="image" :src="item" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
/**
* 圖片url列表
*/
list: {
type: Array,
default: []
}
},
data() {
return {
/**
* 開始觸摸點(diǎn)坐標(biāo)
*/
start: {
x: 0,
y: 0
},
/**
* 每個(gè)item樣式列表
*/
styleList: [],
height: 0
};
},
created() {
this.list.forEach((item, index) => {
this.styleList.push(this.addStyle(index))
})
},
mounted () { //防止頁面翻頁抖動(dòng)
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.image').boundingClientRect(data => {
this.height = data.height
}).exec();
}, 1500)
},
methods: {
imageTap(item) { // 圖片的點(diǎn)擊事件
this.$emit('image-tap', item)
},
/**
* 計(jì)算每個(gè)item樣式
* @param {Object} idx
*/
addStyle(idx) {
const len = this.list.length;
if (idx > len / 2) {
//這里是數(shù)組后一半的item放在左邊,平移位置由遠(yuǎn)到近，例如共6個(gè)，后2個(gè)處理在這里
var left = len - idx
return {
transform: 'scale(' + (1 - left / 10) + ') translate(-' + (left * 25) + '%,0px)',
zIndex: 9999 - left,
filter: `blur(${left==0?0:5}px)`, //濾鏡
display: idx == len - 1 ? "block" : "none"
}
} else {
//這里是數(shù)組前一半item放在右邊，平移位置由近到遠(yuǎn)，例如共6個(gè)，前4個(gè)處理在這里，這里第一個(gè)元素始終放在中間位置
return {
transform: 'scale(' + (1 - idx / 10) + ') translate(' + (idx * 25) + '%,0px)',
zIndex: 9999 - idx,
filter: `blur(${idx==0?0:5}px)`, //濾鏡
display: idx > 1 ? "none" : "block"
}
}
},
/**
* 觸摸開始
* @param {Object} e
*/
touchStart(e) {
this.start.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
this.start.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
},
/**
* 觸摸結(jié)束
* @param {Object} e
*/
touchEnd(e) {
var newStyleList = JSON.parse(JSON.stringify(this.styleList))
let tx = e.changedTouches[0].pageX - this.start.x
let ty = e.changedTouches[0].pageY - this.start.y
if (Math.abs(tx) > Math.abs(ty)) {
//左右方向滑動(dòng)
if (tx < 0) {
// 向左滑動(dòng)
var last = [newStyleList.pop()]
newStyleList = last.concat(newStyleList)
} else if (tx > 0) {
// 向右滑動(dòng)
newStyleList.push(newStyleList[0])
newStyleList.splice(0, 1)
}
} else {
//這里就不處理上下方向的事件了，有此需求的同仁可以在這里寫邏輯
//上下方向滑動(dòng)
if (ty < 0) {
// 向上滑動(dòng)
} else if (ty > 0) {
// 向下滑動(dòng)
}
}
this.styleList = newStyleList
},
/**
* 當(dāng)前item點(diǎn)擊返回索引下標(biāo)
* @param {Object} idx
*/
}
}
</script>
<style scoped lang="scss">
.box{
.swiper-container {
box-sizing: border-box;
width: 100%;
position: relative;
.swiper-item {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .5s;
.wrap {
padding: 2upx 44upx;
.image {
width: 100%;
border-radius: 20upx;
}
}
}
}
}
</style>
組件使用文章來源：http://www.zghlxwxcb.cn/news/detail-509807.html
<template>
<view class="tabbar-page">
<view class="head">
<image @tap="showBannerLink" :src="banner.imageUrl" style="width: 100%" mode="widthFix"></image>
</view>
<view v-if="imageList.length" class="h1">精彩呈現(xiàn)</view>
<kevy-swiper v-if="imageList.length" :list="imageUrlList" @image-tap="imageTap"></kevy-swiper>
</view>
</template>
<script>
import KevySwiper from '../../components/kevy-swiper/kevy-swiper.vue'
import store from '@/store/index'
import crmApiService from '@/api/crmApi'
export default {
components: {KevySwiper},
data () {
return {
imageList: [],
banner: {}
}
},
watch: {},
computed: {
ossUrl () {
return this.$config.ossUrl
},
imageUrlList () {
return this.imageList?this.imageList.map(item => item.imageUrl) : []
},
activityUrl () {
return this.ossUrl + 'test_activity.png'
}
},
methods: {
showBannerLink() {
// uni.navigateTo({ url: '/pages/webview/webview?url='+this.banner.linkUrl })
},
imageTap (url) {
this.imageList.some(item => {
if (item.imageUrl == url) {
uni.navigateTo({ url: '/pages/webview/webview?url='+item.linkUrl })
return true
}
})
}
},
onShow () {
this.setTabBarIndex(2)
crmApiService.getBanners().then(res => {
if (res.success) {
this.banner = res.result
} else {
this.$tip.toast(res.message)
}
})
crmApiService.getCarousels().then(res => {
if (res.success) {
this.imageList = res.result
} else {
this.$tip.toast(res.message)
}
})
}
}
</script>
<style scoped lang="scss">
.h1 {
font-size: 48upx;
color: #111111;
text-align: center;
font-weight: 500;
padding: 44upx 0;
}
.tabbar-page {
padding-bottom: calc(env(safe-area-inset-bottom) + 68px);
overflow-x: hidden;
}
.activity-wrap {
padding: 0 44upx;
}
</style>
如果有自動(dòng)輪播的需求，可以改造下組件加個(gè)定時(shí)器處理數(shù)組就OK了。文章來源地址http://www.zghlxwxcb.cn/news/detail-509807.html
到了這里，關(guān)于uni-app小程序折疊3D輪播圖效果實(shí)現(xiàn)。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
