龙空技术网

Uniapp|爬坑之真机点击无效

爱玩的安哥 1824

前言:

而今大家对“js onclick事件”大体比较注意,兄弟们都想要了解一些“js onclick事件”的相关知识。那么小编在网摘上汇集了一些关于“js onclick事件””的相关内容,希望朋友们能喜欢,同学们一起来学习一下吧!

本人项目在微信小程序里面一直正常,但不管是跑模拟器还是真机,通过运行到手机或模拟器之后。

在使用uni-list的时候没办法正常跳转,比如下面这样的代码:

<uni-list class="plan" v-for="(plan, index) in yesterdayAibhPlansList.plans_list" :key="plan.id">    <uni-list-item :title="plan.pth_sentence.title" :note="plan.pth_lesson.title"        :rightText="'创建计划:'+ plan.plan_make_time + '前'" @click="toPracticePage(plan, 'yesterday')" link        clickable>    </uni-list-item></uni-list>

这里点击后我是希望能够进入Practice页面,但奇怪的是,刚进入真机APP的时候一切正常,但一旦有数据删除、添加的时候,表现就不正常了,有时候首尾可以点击进入下一页面,而中间的不行,有时候只剩下头一个可以点击。而那些无法进入下一页的也不是完全没反应,只是闪了一下,就没有然后了。

一开始以为是自己的key可能写成index(不建议使用index),导致vue不知道更新哪一个。但自己用的全是数据库中的id号,这绝对是唯一的,不可能重复。如上图中的plan.id。

尝试了改为click改为tap,现象一致。而且看网上的文章,tap还容易出现二次点击的毛病。

又觉得可能是数据更新有毛病,专门添加了forceUpdate,而且只在APP平台中有效:

// #ifdef APP-VUE|| APP || APP-NVUE || APP-PLUSconsole.log("force update");self.$forceUpdate()// #endif

但一切照旧,郁闷了两天后我发现了click的一个选项:native。这个选项来自于vue, 看官方文档讲得很抽象,没搞懂,研究后发现网上的说法比较多,在多次试验后发现,下面的解释比较靠谱,即:

给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符),等同于在自定义组件中,子组件内部处理click事件然后向外发送click事件:$emit("click".fn),也就是说有了native才会让子组件真正的监控到click事件,而且极可能是个内部的bug,只不过使用native之后可以解决问题,因为在uniapp里面是真机测试的时候才需要加上native, 而小程序里面并不需要!

所以我的理解是:uni-list-item这个子组件,想要正常地触发click,需要添加上native,这样点击此组件的时候,click事件才会正确的传递进去!进而再调用父组件的click方法,看下图我的试验。

点击有反应的解决办法

<uni-list class="plan" v-for="(plan, index) in todayAibhPlansList" :key="plan.id">    <uni-list-item :title="plan.pth_sentence.title" :note="plan.pth_lesson.title"        :rightText="'创建计划:'+ plan.plan_make_time + '前 '" @click.native="toPracticePage(plan, 'today')" link        clickable>    </uni-list-item></uni-list>

即用@click.native, 注意不能是@tap.native,这个我已经测试过了,无效。

添加native之后,微信小程序也是正常的!

另外,还有一种情况点击后无反应。

点击后页面没有跳转

点击无反应也可能是你的页面没有跳转

你是否在Navigate中使用的是tabbar页面?同样微信小程序可以跳,但真机不行,这个在官方文档里面有说明:

这时候,你应该使用的是uni.switchTab,点击的后真机就可以跳转了。(类似这种事,官方其实给出个警告,结果啥提示也没有)

toUserPage() {    uni.switchTab({        url: '/pages/user/user'    })},

还是不行的话,检测下自己有没有正确的使用组件,比如:

uni-list-item点击后不跳转

uni-list-item点击无效,看有没有添加link或者clickable,有这两个就能够触发点击事件了。

<uni-list class="practice" v-for="(practice, index) in latestPracticesList" :key="practice.id">    <uni-list-item :thumb="index | toPNG" :title="practice.pth_sentence.title"        :note="'课程:'+practice.pth_lesson.title" :rightText="practice.created_at + '前'"        @tap="toPracticePage(practice)" link clickable>    </uni-list-item></uni-list>

可以看看uni-list-item中关于onClick的源代码,也就是link, clickable任一项都会触发父组件传递的click事件。

onClick() {    if (this.to !== '') {        this.openPage();        return;    }    if (this.clickable || this.link) {        this.$emit('click', {            data: {}        });    }},

同样的,这个现象小程序里面可能没有,但真机里面就是不会跳转,你说让人晕不晕。

总结

虽然此问题在uni-list里面出现,但当你使用自定义组件的时候,也可能会遇到点击后没反应的情况,此时试下@click.native

uniapp坑确实挺多的,但感觉主要还是各种平台造成的,浏览器,PC,真机,还有各种小程序环境其实都不一致,手机平台也分苹果、安卓两大类。所以我还是在坚持用uniapp,毕竟排除了小坑,其它表现真的是挺一致的。

我是@爱玩的安哥,关注我获取更多有用知识

标签: #js onclick事件