小程序中input标签没有反应_解决微信小程序弹出层中input无法聚焦的问题

此处使用的是vant框架

解决聚焦问题

这里遇到的问题是，在点击搜索框后，设置了弹起的弹出层中van-search的foucs值为true

但是没有起到聚焦效果

原因在于弹出框带有一个动画效果，需要在动画效果之后再使focus的值为true才能生效

关键代码如下

focus="{{isfocus}}"

model:value="{{ searchValue }}"

placeholder="请输入您要搜索的值"

js中

lifetimes: {

attached: function() {

setTimeout(()=>{

this.setData({

isfocus:true

})

},800)

}

顺便记录下封装组件遇到的一些问题

需要先将json中设置"component":true

js的Component中设置options 这是为了可以使用父组件中的样式

options:{

styleIsolation:"shared"

当封装弹出框组件时(vue同样适用)

子组件设置一个properties接收父组件传来的值fromparents

再设置一个data:isDialogShow,监测fromparents值的变化并赋值给这个data

不直接赋予是因为properties是单向数据流，只能父组件改变子组件，而不能子组件改变父组件，所以需要一个值作为中间过渡

父组件

html

主要事件代码如下

dialogClose(){

setTimeout(()=>{ //因为动画原因加的延时

this.setData({

showDialog: false

});

},500)

子组件

html

主要代码如下

observers:{

'fromparents'(){

this.setData({

isDialogShow:this.data.fromparents

})

if(this.data.showDialog){

setTimeout(()=>{

this.setData({

isfocus:true

})

},800)

}

methods:{

// 关闭弹窗时

onClose() {

this.triggerEvent('dialogClose')

}

小程序中input标签没有反应_解决微信小程序弹出层中input无法聚焦的问题相关推荐

安防互联网摄像头海康大华硬盘录像机视频流媒体服务器EasyNVR在layer弹出层中使用video标签无法最大化全屏播放问题解决
诞生背景众所周知,EasyNVR可以将局域网/广域网上的海康/大华等网络摄像头由rtsp转换为rtmp.rtsp.hls.flv协议转换,并提供推流服务,可以将拉到的网络摄像头直接转发到流媒体服务器 ...
layer中html字符转换,在layer弹出层中通过ajax返回html拼接字符串填充数据的方法...
1,在给一个layer弹出层做checkbox自动选中时,ViewBag传递的时object类型,用不了lambda表达式,代码如下, @foreach (var perm in ViewBag.al ...
layui点击弹出层中按钮，关闭弹出层
layui点击弹出层中按钮,关闭弹出层原理:点击自己定义的button时,触发弹出层右上角取消按钮. <button type="button" lay-submit=&q ...
layui弹出层中添加下拉框
layui弹出层中添加下拉框实习不到两个月,踩到的坑使用layui写了一个项目,负责其中的一小块,其中有一个页面需要在弹出层中写一个下拉框代码如下: <div class="la ...
微信小程序项目实战知识点总结(swiper组件自适应高度，自定义弹出层，悬浮按钮，虚拟键盘)...
1.小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 height:100vh; 2.微信小程序自定义弹出层,参考网址:https://blog.cs ...
taro 小程序转h5之后报错_记录微信小程序转Taro中遇到的问题
环境系统:windows 开发工具:微信开发工具RC V1.02.1907301 + vscode 微信基础库版本:2.8.1 Taro:v1.3.15 npm: 6.4.1 node: v8.12 ...
微信小程序怎么在wxml中插入多个图片_闲聊微信小程序开发框架(二)
在前面一篇文章中我们介绍了小程序开发框架的几个组成部分,今天就让我们了解一下小程序开发框架的底层架构是如何实现的. 小程序的开发框架成为MINA框架,通过上面的框架图我们可以看到三个部分.首先是Vie ...
微信小程序网络请求异常怎么办_解决·微信小程序开发-网络请求报Invalid request 400错误...
今天学习了一下微信小程序的入门开发,在使用网络请求时,发现根据微信官方的API的方法进行操作出现Invalid request 400错误,到底怎么回事呢? 首先我们来看微信API网络请求示例代码: ...
微信小程序突然多了好多动态_让微信小程序的登陆页面有云朵悬浮的动态效果...
微信小程序目前的火热程度相信不用多言,尤其是近期微信团队开发小程序很多之前被诟病的功能:模糊搜索,附近小程序等.最近有网友利用空余时间用小程序实现了个动态的登录页效果,所以下面我们51小程序就吧这篇文 ...

小程序中input标签没有反应_解决微信小程序弹出层中input无法聚焦的问题

小程序中input标签没有反应_解决微信小程序弹出层中input无法聚焦的问题相关推荐

最新文章

热门文章