如何做乙個滑動的功能?

2022-09-24 03:03:07 字數 1953 閱讀 9473

在實際的移動應用程式互動方式中,最常見的就是滑動操作。像左右滑動切換頁面,手指張開來放大等,都是由滑動操作來完成的。

tap對應點選操作,還提供了longtap來支援長按操作,這些都比較簡單,就不多做講述。

touchmove對應滑動操作,通過bindtouchmove即可響應滑動操作。

//js

page(,在實際應用中,當某種手勢被觸發後,在使用者沒有放開滑鼠或手指前,會一直識別為該手勢。比如當使用者觸發左滑手勢後,這時再向下滑動,仍要按照左滑手勢來處理。

可以定義乙個標記來記錄第一次識別到的手勢,如果已識別出手勢,後續的滑動操作就可以忽略,直到使用者放開滑鼠或手指。放開滑鼠或手指操作可以通過繫結handletouchend事件來處理。

page({

data: {

lastx: 0,

lasty: 0,

text : 沒有滑動,

currentgesture: 0,

handletouchmove: function(event) {

console.log(event)

if (this.data.currentgesture != 0){

return

let currentx = event.touches[0].pagex

let currenty = event.touches[0].pagey

let tx = currentx - this.data.lastx

let ty = currenty - this.data.lasty

let text =

//左右方向滑動

if (math.abs(tx) > math.abs(ty)) {

if (tx < 0) {

text = 向左滑動

this.data.currentgesture = 1

else if (tx > 0) {

text = 向右滑動

this.data.currentgesture = 2

//上下方向滑動

else {

if (ty < 0){

text = 向上滑動

this.data.currentgesture = 3

else if (ty > 0) {

text = 向下滑動

this.data.currentgesture = 4

體驗微信小程式,測評微信小程式。海量還玩有趣的小程式在等你。

//將當前座標進行儲存以進行下一次計算

this.data.lastx = currentx

this.data.lasty = currenty

this.setdata({

text : text,

handletouchtart:function(event) {

console.log(event)

this.data.lastx = event.touches[0].pagex

this.data.lasty = event.touches[0].pagey

handletouchtart:function(event) {

console.log(event)

this.data.lastx = event.touches[0].pagex

this.data.lasty = event.touches[0].pagey

handletouchend:function(event) {

console.log(event)

this.data.currentgesture = 0

this.setdata({

text : 沒有滑動,

由於多點觸控需要真機來測試,而我的appid還在申請中,只能延後講解了。這裡大概提下思路,比如手指張開的操作,可以分別判斷兩個觸控點的移動方向,比如靠左的觸控點向左滑動,靠右的觸控點向右滑動,即可判定為手指張開操作。

如何做乙個專案

早上上csdn瞧瞧,發現有位同學想在暑期做個論壇,想要點建議,相信有不少已經入門想有所提高的同學都有這個想法。那麼我就在此提幾點意見,大家可以討論討論。首先選專案,我覺得這位同學拿論壇入手是比較合適的,原因有這樣幾點 1 論壇的基本業務邏輯大家都很熟悉2 量不是很大,可以在兩個月內完成基本功能的實現...

如何做乙個快樂的人

人,要做乙個明白人。所謂明白人,既能努力改變環境,更能努力改變心境。改變環境靠聰明,改變心境靠智慧型。智慧型的人能悟出人生真諦,把握生活方向,知道自己的根本追求,不會為了一點瑣事而惱。開心的前提是愛心。所謂愛心,可理解為乙個人要有愛人之善心,也可理解為人要愛自己的心。通過修身養性,純潔心靈,隨時調控...

如何做乙個有趣的人

1 不善表達是能力不行 儲備太少 不是性格內向 請不要自欺欺人咯 這句話至少對於自己完全沒毛病。2 極簡主義 衣服不要多,但要有質感。朋友不要多,但要有交情。資訊不要多,但都很重要。讀書不必多,但要有深度。東西不必多,但要用得著。3 作者對極簡主義的理解 不對這個泛泛的世界投注太多的感情 太多的時間...