Rumah > hujung hadapan web > uni-app > Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor

Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor

青灯夜游
Lepaskan: 2021-09-14 18:54:58
ke hadapan
10480 orang telah melayarinya

Bagaimana untuk memantau acara dalam projek uni-app? Lajur uniapp tutorial berikut akan memperkenalkan kepada anda kaedah memantau acara sentuh dan acara gelongsor dalam apl uni saya harap ia akan membantu anda!

Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor

Dengar acara sentuh dan acara gelongsor dalam apl uni

Dokumentasi penggunaan ColorUI: https://blog.csdn.net/DevilAngelia/article/ butiran /119447883

Inti utama acara gelongsor jari ialah tiga acara:

1 @touchstart: touch start; 2. @touchmove: proses gelongsor jari; 3. @touchend: Sentuhan tamat dan jari meninggalkan skrin.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<view class="margin-top-sm showMore-box"

    :style="{

        transform: &#39;translateX(&#39;+moveX+&#39;px)&#39;,

        transition: transition

    }"

    @touchstart="start"

    @touchend="end"

    @touchmove="move">

    <view class="radius bg-gray padding-top-sm margin-right-xl" style="flex: 1; overflow: hidden;">

        <view class="flex align-center justify-between padding-lr-sm">

            <text class="text-bold text-black">和平精英</text>

            <text class="bg-gray radius padding-lr-sm text-green">进入</text>

        </view>

        <view class="margin-top-sm padding-lr-sm">

            <text class="cuIcon-paintfill text-yellow"></text>

            <text class="text-black text-bold padding-lr-sm">战绩</text>

            <text class="text-black">和平战报已送达</text>

        </view>

        <view class="margin-top-sm padding-lr-sm">

            <text class="cuIcon-paintfill text-yellow"></text>

            <text class="text-black text-bold padding-lr-sm">直播</text>

            <text class="text-black">万场老六,细节导师</text>

        </view>

        <view class="padding-sm margin-top-sm flex align-center justify-between" style="background: #AAAAAA;">

            <text class="">更多服务</text>

            <text class="cuIcon-right"></text>

        </view>

    </view>

    <view class="radius bg-gray padding-sm flex align-center" style="width: 100vw; height: 100%; position: absolute; z-index: 1; right: calc(-100vw + 15px); top: 0;">

        <text class="cuIcon-pullleft text-gray"></text>

        <view class="text-gray padding-left-sm" style="width: 16px;">{{rightText}}</view>

    </view>

</view>

Salin selepas log masuk

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

data() {

    return {

        startData: {

            clientX: &#39;&#39;,

            clientY: &#39;&#39;,

        },

        moveX: 0,

        touch: {},

    }

},

methods: {

    // 触摸touch事件

    start(e){  //@touchstart 触摸开始

        this.transition = &#39;.1s&#39;;

        this.startData.clientX = e.changedTouches[0].clientX;   //手指按下时的X坐标        

        this.startData.clientY = e.changedTouches[0].clientY;   //手指按下时的Y坐标

    },

    end(e){  //@touchend触摸结束

        this.moveX = 0;  //触摸事件结束恢复原状

        this.transition = &#39;.5s&#39;;

        if(Math.abs(this.touch.clientX-this.startData.clientX) > 100) {  //在事件结束时,判断滑动的距离是否达到出发需要执行事件的要求

            console.log(&#39;执行查看跳转事件&#39;);

            // this.touch = {};

        } else {

            console.log(&#39;滑动距离不够,不执行跳转&#39;)

            // this.touch = {};

        }

    },

    move(event) {  //@touchmove触摸移动

        let touch = event.touches[0];  //滑动过程中,手指滑动的坐标信息 返回的是Objcet对象

        this.touch = touch;

        let data = touch.clientX - this.startData.clientX;

        if(touch.clientX < this.startData.clientX) {  //向左移动

            if(data<-250) {

                data = -250;

            }

        }

        if(touch.clientX > this.startData.clientX) {  //向右移动

            if(this.moveX == 0) {

                data = 0

            } else {

                if(data>50) {

                    data = 50;

                }

            }

        }

        this.moveX = data;

    },

}

Salin selepas log masuk

1

2

3

4

.showMore-box{

    position: relative;

    // transition: all .5s;

}

Salin selepas log masuk

1 Sebelum menyentuh dengan jari

Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor

2

Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor

3 Lepaskan jari anda dan halaman akan melantun semula

Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor

Halaman ditulis menggunakan pustaka css colorUI, dengan anda sendiri css Terdapat sangat sedikit gaya yang ditulis, dan saya pada dasarnya menggunakan kelasnya Di sesetengah tempat, saya terlalu malas untuk menyesuaikan warna, jarak dan saiz sendiri, jadi saya hanya menggunakan kelas colorUI, yang sangat mudah.

alamat muat turun github colorui: https://github.com/weilanwl/ColorUI/

Kali pertama saya menulis kesan gelongsor, saya tidak menulisnya dengan baik. Pemula, kualiti kod membimbangkan, belajar dengan fikiran terbuka dan menerima kritikan dan pembetulan.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang cara projek uni-app memantau peristiwa sentuhan dan gelongsor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan