关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查

前言

最近使用React开发微信H5搜索框自动聚焦功能，发现路由跳转页面后无法自动聚焦。尝试了各种方法均不生效…后来发型是异步加载组件问题，个人估计是微信浏览器在异步组件加载完成后导致节点失焦。

尝试过的解决方法

input 属性 autofocus —— 不生效
ref保存组件处罚 ref.curren.focus() —— 不生效

解决方案

完整查看了路由注册引入组件的方式，个人认为是异步加载组件的原因。尝试修改为同步引入组件。yes!成功。具体原因需深入调查，先记录以下踩坑

原路由注册方式 (异步，无法自动聚焦)

{path: "/search",exact: true,component: loadable(() => import('./pages/search')),title: '搜索',}

修改后路由注册方式(同步，完成聚焦)

import SearchPage from './pages/search'
{path: "/search?",exact: true,component: SearchPage,title: '搜索'}

关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查相关推荐

Vue工程化项目创建-VueCli与Vite
在完成了node.js的安装之后,我们就可以正式来创建我们的Vue工程化项目了,我目前学习到两个创建工程化项目的工具是Vue-Cli还有Vite,其中VueCli可用于创建vue2与vue3的项目,而 ...
微信浏览器H5页面自动播放背景音乐
微信浏览器H5页面自动播放背景音乐最近遇到一个需求一个文章详情页(图文结合) 进入页面后自动播放背景音乐正常用video标签后安卓打开后是自动播放的但是ios是不支持自动播放的经过不懈努力的 ...
【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
vue工程化第二节添加内容和样式使用axios请求数据,参考这里添加局部左右滑动(即将上映页),参考 (左右滑动也可使用插件) 组件化开发,相同代码可以提取出来作为一个组件来调用,减少代码量,提 ...
微信浏览器h5分享卡片模式
微信内置浏览器中的h5想要分享给朋友或者朋友圈的时候是卡片模式并且带图片和标题需要用到微信的jweixin-module包, 这里拿在uni的h5项目中作为例子安装包 npm install jw ...
解决电脑端微信浏览器不支持vue、axios等问题
网上搜罗了一大圈关于微信不支持vue的问题,大部分都说是版本问题.后来我直接用官网的demo试了下是没问题的,然后把demo的vue.js改为我本地的,结果也是可以的-_-... 最终...我吧vue ...
uniapp微信浏览器H5授权微信登录
1.准备一个触发微信登录的按钮 <button class="wechat-logo" @click="getWeChatCode">微信授权登录& ...
使用vue-cli创建Vue工程化项目及单文件组件的创建和调用
文章目录 1. Vue 单文件组件的优势 2. cli 创建 Vue 工程项目 3. 单文件组件的创建和调用 1. Vue 单文件组件的优势把一个组件全部内容汇合到一个文件中,文件名字是以 .vue ...
【vue项目实战】Vue工程化项目--猫眼电影移动端
这里是仿猫眼移动端.使用 vue-cli 创建项目. 本节先介绍并进行项目的初始化,然后把主框架搭起来,熟悉路由和组件,后面在项目demo 持续贴出完整项目代码.也会更新博客. 第二节传送 ...
微信浏览器H5下载文件
微信浏览器无法下载文件,我们可以跳转外部浏览器进行下载. 首先绑定按钮事件(我这里用的uniapp开发) <button class="btn" @click="d ...

关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查

前言

尝试过的解决方法

解决方案

关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查相关推荐

最新文章

热门文章