@an1r0ny/skyline-swiper
Version:
微信小程序轮播组件 - 支持Skyline渲染模式
2 lines (1 loc) • 2.68 kB
JavaScript
Component({options:{virtualHost:!0},behaviors:[],properties:{},relations:{"./sky-swiper":{type:"parent",linked(t){this._target=t,this._progress=t._progress,this._width=t._width,this._height=t._height,this._vertical=t._vertical,this._circular=t._circular,this._listLength=t._listLength,this._minCircularSlides=t._minCircularSlides,this._pxPerRpx=t._pxPerRpx,this.initAnim()}}},data:{index:0,current:0,cacheExtent:4},lifetimes:{created(){},attached(){},moved(){},detached(){}},observers:{"current, index, cacheExtent":function(){this.timer&&clearTimeout(this.timer),this._vertical&&this._progress&&this._width&&this._height&&(this.timer=setTimeout(()=>{this.initAnim()}))}},methods:{initAnim(){const{current:t,index:e,cacheExtent:i}=this.data;let s=Math.abs(t-e);if(this._circular&&this._circular.value&&this._listLength&&this._listLength.value>=(this._minCircularSlides?this._minCircularSlides.value:4)){const r=this._listLength.value,n=s,a=r-s;s=Math.min(n,a)}s>i||(this.clearAnim(),this._vertical&&this._vertical.value?this.initVAnim():this.initHAnim())},clearAnim(){var t;((t=this.styleIds)==null?void 0:t.length)<=0||this.clearAnimatedStyle(".swiper-slide-content",this.styleIds,()=>{this.styleIds=[]})},initHAnim(){const{index:t}=this.data;this.applyAnimatedStyle(".swiper-slide-content",()=>{"worklet";const e=this._progress.value/this._width.value;let i=t-e;if(this._circular&&this._circular.value&&this._listLength&&this._listLength.value>=(this._minCircularSlides?this._minCircularSlides.value:4)){const s=this._listLength.value,r=i,n=i-s,a=i+s;Math.abs(n)<Math.abs(r)?i=n:Math.abs(a)<Math.abs(r)&&(i=a)}return this._target._slideTransform&&typeof this._target._slideTransform=="function"?this._target._slideTransform(i,this._width.value,this._pxPerRpx.value):{transform:`translateX(${i*this._width.value}px)`,transformOrigin:"center"}},{immediate:!0,flush:"async"},e=>{!this.styleIds&&(this.styleIds=[]),this.styleIds.push(e)})},initVAnim(){const{index:t}=this.data;this.applyAnimatedStyle(".swiper-slide-content",()=>{"worklet";const e=this._progress.value/this._height.value;let i=t-e;if(this._circular&&this._circular.value&&this._listLength&&this._listLength.value>=(this._minCircularSlides?this._minCircularSlides.value:4)){const s=this._listLength.value,r=i,n=i-s,a=i+s;Math.abs(n)<Math.abs(r)?i=n:Math.abs(a)<Math.abs(r)&&(i=a)}return this._target._slideTransform&&typeof this._target._slideTransform=="function"?this._target._slideTransform(i,this._height.value,this._pxPerRpx.value):{transform:`translateY(${i*this._height.value}px)`,transformOrigin:"center"}},{immediate:!0,flush:"async"},e=>{!this.styleIds&&(this.styleIds=[]),this.styleIds.push(e)})}}});