| 1 |
- "use strict";const i=require("../common/vendor.js"),c={props:{items:{type:Array,required:!0,default:()=>[]},containerHeight:{type:Number,default:400},autoPlay:{type:Number,default:3e3},scaleRatio:{type:Number,default:1.2}},data(){return{currentIndex:0,startX:0,moveX:0,translateX:0,itemWidth:0,isAnimating:!1,isDragging:!1,timer:null}},watch:{items(){this.currentIndex=0,this.$nextTick(()=>{this.calculateLayout()}),this.resetAutoPlay()},currentIndex(){this.updatePosition(!0)},autoPlay(){this.resetAutoPlay()}},mounted(){this.$nextTick(()=>{this.calculateLayout()}),i.index.onWindowResize(()=>{this.$nextTick(()=>{this.calculateLayout()})}),this.initAutoPlay()},beforeDestroy(){this.clearTimer(),i.index.offWindowResize()},methods:{calculateLayout(){i.index.createSelectorQuery().in(this).select(".swiper-container").boundingClientRect(e=>{e&&(this.itemWidth=e.width/2,this.updatePosition(!1))}).exec()},updatePosition(t=!0){this.itemWidth&&(this.isAnimating=t,this.translateX=this.itemWidth-this.currentIndex*this.itemWidth)},getItemStyle(t){if(!this.itemWidth)return{};const e=Math.abs(t-this.currentIndex);let n=1,a=1,r=.8;return e===0&&(n=this.scaleRatio,a=10,r=1),{width:`${this.itemWidth}px`,transform:`scale(${n})`,zIndex:a,opacity:r,transition:this.isAnimating?"all 0.3s ease-out":"none"}},handleTouchStart(t){this.items.length<=1||(this.isDragging=!0,this.isAnimating=!1,this.startX=t.touches[0].clientX,this.clearTimer())},handleTouchMove(t){if(!this.isDragging||this.items.length<=1)return;this.moveX=t.touches[0].clientX;const e=this.moveX-this.startX;this.translateX=this.itemWidth-this.currentIndex*this.itemWidth+e*.8},handleTouchEnd(){if(!this.isDragging||this.items.length<=1)return;this.isDragging=!1;const t=this.moveX-this.startX,e=this.itemWidth/3;t>e?this.prev():t<-e?this.next():this.updatePosition(!0),this.resetAutoPlay()},next(){this.currentIndex>=this.items.length-1?this.currentIndex=0:this.currentIndex++},prev(){this.currentIndex<=0?this.currentIndex=this.items.length-1:this.currentIndex--},switchTo(t){t!==this.currentIndex&&(this.currentIndex=t,this.resetAutoPlay())},initAutoPlay(){this.autoPlay>0&&this.items.length>1&&(this.timer=setInterval(()=>{this.next()},this.autoPlay))},resetAutoPlay(){this.clearTimer(),this.initAutoPlay()},clearTimer(){this.timer&&(clearInterval(this.timer),this.timer=null)}}};function o(t,e,n,a,r,u){return{a:i.f(n.items,(h,s,l)=>i.e({a:h.imgUrl,b:h.title,c:h.title},h.title?{d:i.t(h.title)}:{},{e:s,f:i.s(u.getItemStyle(s))})),b:`translateX(${r.translateX}px)`,c:r.isAnimating?"transform 0.3s ease-out":"none",d:n.containerHeight+"px",e:i.f(n.items,(h,s,l)=>({a:s,b:s===r.currentIndex?1:"",c:i.o(m=>u.switchTo(s),s)}))}}const d=i._export_sfc(c,[["render",o],["__scopeId","data-v-51bea54d"]]);wx.createComponent(d);
|
