uniapp所有事件详解

 click: 'tap',          点击事件
    touchstart: 'touchstart',    触摸事件
    touchmove: 'touchmove',      触摸滑动
    touchcancel: 'touchcancel',     触摸被取消
    touchend: 'touchend',          触摸结束
    tap: 'tap',           
    longtap: 'longtap',        
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
事件修饰符
  

    注意:  Vue中的事件修饰符在uni-app中有以下问题

    stop-----------------使用stop可以阻止冒泡,但是会把一个事件绑定成非冒泡状态,会导致该元素上的catchEventName失效.

    prevent-------------uni-app中基本没有什么默认事件,所以prevent阻止默认事件的行为基本上没用.

    self------------------没有可以判断的标识

    once----------------uni-app没有removeEventListner,虽然可以直接在handleProxy中处理,但非常的不优雅,违背了意愿,暂不考虑

    按键修饰符-------uni-app运行在智能手机端,没有键盘事件,所以不支持按键修饰符

    事件绑定:与vue中的事件绑定一致,使用简写的    @

    事件传参:与vue中事件传参基本一致,使用v-for



可以看如下示例,代码复制后,覆盖index.vue页面,看页面事件的触发



<template>

    <view>

        <view style="width: 100%; height: 150upx;"></view>


        <input type="text" :value="title"

         style="background-color: #007AFF;height: 100upx"

        @input="change"


        @focus="focus"


        @blur="blur"


        @confirm="confirm"


        @click="click"


        @tap="tap"


        @longpress="longpress"


        @touchstart="touchstart"


        @touchend="touchend"


        @touchmove="touchmove"


        @touchcancel="touchcancel"

        />

        <!-- 不推荐使用了, 请使用 longpress @longtap="longtap" -->

    </view>

</template>


<script>

    export default {

        data() {

            return {


            }

        },

        methods: {

            change(){

                console.log("输入框改变")

            },

            focus(){

                console.log("获得焦点")

            },

            blur(){

                console.log("失去焦点")

            },

            confirm(){

                console.log("点击完成按钮/回车键")

            },

            // 使用时 tap 和 click 只使用一个就好

            click(){

                console.log("单击事件")

            },

            tap(){

                console.log("组件被触摸")

            },

            longpress(){

                console.log("长时间按压")

            },

            //不推荐使用,请使用longpress

            // longtap(){

            //     console.log("长时间触摸")

            // }

            touchstart(){

                console.log("触摸开始")

            },

            touchend(){

                console.log("触摸结束")

            },

            touchmove(){

                console.log("手指移动")

            },

            //如打进电话, (暂时无法演示)

            touchcancel(){

                console.log("触摸被打断")

            }

        }

    }

</script>


<style>


</style>



uniapp开发解决多次点击触发事件



1.先创建一个文件交common文件在文件下面创建一个common.js文件内容如下


// 处理多次点击

function dianji(fn) {

    let that = this;

    if (that.onoff) {

        that.onoff = false;

        fn();

        setTimeout(function () {

            that.onoff = true;

        }, 1500)

    } else {

        console.log("请稍后点击")

    }

}

export {

    dianji

}

2.在main.js中引入然后挂载待vue原型上这样就可以全局使用了

import { dianji } from './common/common'

Vue.prototype.$dianji = dianji;

3.使用的时候

        <view class="list-container" @click="$dianji(target)"> 

target:就是你需要触发的函数;






https://www.duanshuilu.com/

评论者:[[ schemeInfo.user.username ]]

评论内容:[[ schemeInfo.pbody ]]

评论时间:[[ schemeInfo.ptime ]]





发表你的评论:

提交评论
上一篇:
下一篇: