网站建设的问题疑问,wordpress在php下安装教程,网站推广服务网址,注册的网站一、实现堆叠卡片轮播图:
需求:
实现堆叠轮播图效果堆叠到后面的图片有虚化效果可以在堆叠图片上写文字或叠加图片等效果可以手动滑动#xff0c;也可以定时自动轮播 二、代码实现#xff1a;
1.封装一个组件myswiper.vue
!-- 折叠轮播图 组件--
template也可以定时自动轮播 二、代码实现
1.封装一个组件myswiper.vue
!-- 折叠轮播图 组件--
templateview classswpbigview classswiperPanel refswiperPanel touchstartstartMove touchendendMoveview classswiperItem v-for(item, index) in swiperList :keyindex :style{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}view classchildrenview classpicimage classpici :srcitem.url/imageimage classbanner_signal src../../static/banner_signal.png mode/imageview classswpnew标题/view/view/view/view/view/view
/templatescriptvar timer;export default {props: {swiperList: {type: Array,default: ()[{type: Array,url: ../../static/ceshi1.png,}, {type: Array,url: ../../static/ceshi2.png,}, {type: Array,url: ../../static/ceshi3.png,}]}},data() {return {slideNote: {x: 0,y: 0},screenWidth: 0,itemStyle: []};},created() {var macInfo uni.getSystemInfoSync();this.screenWidth macInfo.screenWidth;// 计算swiper样式this.swiperList.forEach((item, index) {this.itemStyle.push(this.getStyle(index))})timer setInterval((){this.rightSlider();},3000)},methods: {rightSlider(){var newList JSON.parse(JSON.stringify(this.itemStyle));var last [newList.pop()]newList last.concat(newList)this.itemStyle newList;},getStyle(e) {if (e this.swiperList.length / 2) {var right this.swiperList.length - ereturn {transform: scale( (1 - right / 10) ) translate(- (right * 9) %,0px),zIndex: 9999 - right,opacity: 0.5 / right}} else {return {transform: scale( (1 - e / 10) ) translate( (e * 9) %,0px),zIndex: 9999 - e,opacity: 0.5 / e}}},startMove(e) {clearInterval(timer);this.slideNote.x e.changedTouches[0] ? e.changedTouches[0].pageX : 0;this.slideNote.y e.changedTouches[0] ? e.changedTouches[0].pageY : 0;},endMove(e) {timer setInterval((){this.rightSlider();},3000)var newList JSON.parse(JSON.stringify(this.itemStyle));if ((e.changedTouches[0].pageX - this.slideNote.x) 0) {// 向左滑动var last [newList.pop()]newList last.concat(newList)} else {// 向右滑动newList.push(newList[0])newList.splice(0, 1)}this.itemStyle newList}}}
/scriptstyle langscss.swpbig{overflow: hidden;}.swiperPanel {margin-top: 200upx;height: 680upx;width: 686upx;overflow: hidden;position: relative;margin-left:80upx;.swiperItem {height: 100%;width: 100%;position: absolute;top: 0;left: 0upx;transition: all .5s;.children {// height: 100%;width: 570upx;margin: 2upx 160upx 2upx 0;position: relative;.pic {position: relative;height: 645rpx;width: 560rpx;border-radius: 10upx;}.pici{position: absolute;height: 645rpx;width: 560rpx;border-radius: 10upx; }.banner_signal{position: absolute;height: 645rpx;width: 560rpx;top: 0;}.swpnew{position: absolute;height: 63rpx;font-size: 45rpx;font-weight: bold;color: #FFF;line-height: 53rpx;right: 28rpx;margin-top: 12rpx;letter-spacing: 5rpx;}}}}
/style
2.在需要的页面引用 templateview classmySwiper :swiperListswiperList/mySwiper /view
/templatescript// 组件导入import mySwiper from ../../components/myswiper.vueexport default {// 组件注册components: {blackSwiper},data() {return {//组件数据处理swiperList: [{type: Array,url: https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpgh_1280,}, {type: Array,url: https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000,}, {type: Array,url: https://inews.gtimg.com/om_bt/OuevRi3lDJoCccAqM17UARGbNlk9CRf3pGPv7He7zA8yYAA/1000,}]};},}
/script完成~
