Uniapp自定義swiper滑動模組

2021-10-23 22:18:29 字數 2051 閱讀 7555

手把手教你用原生js來寫乙個swiper滑塊外掛程式(上)原理

vue:class 與 style 繫結

我就耍一次流氓吧先,主要內容看參考文章,以後有時間再詳細補上。

abc<

/p>

<

/view>

="ps-swiper"

>

class

="" @touchstart=

"touchstartevent" @touchmove=

"touchmoveevent" @touchend=

"touchendevent"

:style=

"">

="ps-swiper-item" style=

"background-color: #007aff;"

>

1<

/view>

="ps-swiper-item" style=

"background-color: #aa00ff;"

>

2<

/view>

="ps-swiper-item" style=

"background-color: #ffff7f;"

>

3<

/view>

<

/view>

<

/view>

<

/view>

<

/template>

export

default},

onload()

, methods:

, touchstartevent:

function

(event)

, touchmoveevent:

function

(event)

;// 只有當state == 1時候才允許執行該事件

this

.movestart = event.touches[0]

.pagex;

// 用當前滑鼠的位置來和上次滑鼠的位置作比較

// 如果當前滑鼠的pagex小於上次滑鼠的pagex,那就表示滑鼠在向左拖動,就需要把容器left值減去滑鼠移動的距離

if(event.touches[0]

.pagex <

this

.oldevent.touches[0]

.pagex)

else

// 完事之後記得把當前滑鼠的位置賦值給oldevent

this

.oldevent = event;

// console.log(this.initleft);

// console.log("手指移動了");},

touchendevent:

function

(event)

//右邊界,不能滑動到超一屏

}elseif(

this

.moveleft <-3

)//左邊界,不能滑動到負一屏

}this

.ismove =

true

; console.

log(

"this.initindex"

+this

.initindex)

;this

.initleft =

this

.initindex *

-300

;this

.state =0;

console.

log(

"手指起來了");

}}}<

/script>

.ps-swiper

.ps-swiper .ps-swiper-container

.move

.ps-swiper .ps-swiper-container .ps-swiper-item

<

/style>

uni app自定義相機

設計思路 呼叫camera相機元件,用cover view,cover image標籤新增自定義頁面布局,拍完照之後將 畫到canvas裡面,然後用canvastotempfilepath方法匯出需要的。html部分 data部分 data 在onload時載入相機元件 onload 拍照 take...

Swiper自定義分頁器

rel stylesheet href path to swiper.min.css class swiper container class swiper slide slide 1div class swiper slide slide 2div class swiper slide slide...

uni app實現自定義操作音效

乙個好的軟體,頁面或者是一些操作之間的銜接必須要流暢,出了受到手機自身硬體和網速的影響之外,還可以通過製作過度動畫來顯得很流暢,此外也可以使用一些自定義音效來提公升使用者的體驗。我個人特別比較有感覺的就是蘋果的鬧鐘,移動的時候會發出 噠噠噠噠噠噠.特別清脆的聲響,同時手機也還在振動,那一刻這個鬧鐘就...