每日一个小技巧:解决移动端使用vue3在iOS系统上点击事件卡顿和延迟情况

前言:在最近开发的一款移动端客户管理系统时,使用组件naive UI开发和 vue的点击事件click时在iOS系统上点击非常卡顿和缓慢,用户体验感非常差。在查阅多个资料加上测试之后,寻到了一个方法使操作流程起来。

1.FastClick:提升移动端点击性能的秘密武器

    FastClick的目标在于消除在触屏设备上用户点击元素与页面响应之间通常存在的300毫秒延迟。这一延迟主要来源于浏览器的安全机制,以防止误触发双击事件。然而,对于追求即时反馈的现代应用来说,这无疑影响了交互体验的流畅性。

2.如何安装(vue3版本)

npm install fastclick --save

3.如何引入

    在main.js 或者main.ts中写入这两行代码

import FastClick from 'fastclick';
FastClick(document.body)

4.打包重新运行,会发现点击事件不再缓慢卡顿,问题完美解决。

  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是一个使用 Vant 和 Vue 3 实现表格内容显示的示例: 1. 安装 Vant 使用 npm 安装 Vant: ``` npm install vant ``` 2. 引入 Vant 在 `main.js` 中引入 Vant: ```javascript import { createApp } from 'vue'; import { Button, Cell, CellGroup, Table, TableColumn } from 'vant'; import App from './App.vue'; createApp(App) .use(Button) .use(Cell) .use(CellGroup) .use(Table) .use(TableColumn) .mount('#app'); ``` 3. 创建表格组件 创建一个 `TableComponent.vue` 组件来显示表格内容: ```vue <template> <van-table :columns="columns" :data="data" /> </template> <script> export default { name: 'TableComponent', props: { columns: { type: Array, required: true }, data: { type: Array, required: true } } }; </script> ``` 4. 在父组件中使用表格组件 在需要显示表格的父组件中引入 `TableComponent.vue` 并传入列和数据: ```vue <template> <div> <table-component :columns="columns" :data="data" /> </div> </template> <script> import TableComponent from './TableComponent.vue'; export default { name: 'ParentComponent', components: { TableComponent }, data() { return { columns: [ { title: '姓名', key: 'name' }, { title: '年龄', key: 'age' }, { title: '地址', key: 'address' } ], data: [ { name: '张三', age: 18, address: '北京市朝阳区' }, { name: '李四', age: 22, address: '上海市浦东新区' }, { name: '王五', age: 30, address: '广州市天河区' } ] }; } }; </script> ``` 这样就可以在移动端使用 Vant 和 Vue 3 实现一个表格内容显示了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值