zoukankan      html  css  js  c++  java
  • 解决微信小程序弹出层中input无法聚焦的问题

    此处使用的是vant框架

    解决聚焦问题

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

    但是没有起到聚焦效果

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

    关键代码如下

    <van-search  
              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

     <component-popup  binddialogClose="dialogClose" fromparents="{{showDialog}}"/>
    

    主要事件代码如下

    dialogClose(){
        setTimeout(()=>{  //因为动画原因加的延时
          this.setData({
            showDialog: false
          });
        },500)
      },
    

    子组件

    html

    <van-popup show="{{ isDialogShow }}" position="bottom" round custom-style="height: 94%;" bind:close="onClose">
    

    js

    主要代码如下

      observers:{
        'fromparents'(){
          this.setData({
            isDialogShow:this.data.fromparents
          })
         if(this.data.showDialog){
            setTimeout(()=>{
              this.setData({
                isfocus:true
              })
            },800)
          } 
        }
      },
     methods:{
        // 关闭弹窗时
        onClose() {
          this.triggerEvent('dialogClose')
        }
      }
    
  • 相关阅读:
    requests 发送请求时 保持 headers 的顺序
    python邮件测试时遇到的 u202aF和 u202a 问题
    nexus 5x 刷机指北
    idea 添加自定义模板
    ast入门 (二)
    Django 路由校验
    无法远程连接 VMware
    ubuntu安装TRex
    eclipse 创建 springboot 项目时 报json 错误
    @RestController注解下返回到jsp视图页面
  • 原文地址:https://www.cnblogs.com/axu1997/p/14169393.html
Copyright © 2011-2022 走看看