美文网首页
uni-app下input组件基于内容自适应宽度的实现

uni-app下input组件基于内容自适应宽度的实现

作者: LeungJhowe | 来源:发表于2019-05-08 22:39 被阅读0次

    1、需求


    设计图是‘单价’编辑项是input,随输入内容自己改变,前后有而fix(如果单位'¥/片'放后面那就好做多了);但是uni-app的input组件是有自定宽度的,而且试了好多css都很难控制input的自适应宽度(哪位哥做到了教下我啦),所以只能走获取dom数据,绑定样式这样的方法了。

    2、解决思路

    用的是uni-app里的获取节点的接口 uni.createSelectorQuery()获取节点信息,不详说这东东;
    但注意
    1)这玩意是onReady之后调用的,不然某些地方报错;
    2)如果在封装一个方法,加个回调函数,//todo 卸载回调里
    因为不知道为什么(以为小程序会按H5的顺序执行),h5的执行顺序和 小程序顺序不一样

    function example(id){
      let view = uni.createSelectorQuery().select(id);
      let width
      view.fields({
        id:true,
        size: true,
        scrollOffset: true
      }, data => {
        console.log(`${i.name}得到节点信息` + JSON.stringify(data));
        if(data){
          console.log(`${i.name}得到节点的宽为`,data.width);
        }
        // console.log(`节点的宽为` + data.width);
        // +2:不+2 input H5会有滚动
        width = data?`${data.width+2}px`:'100%'
      }).exec();
      console.log(width)
      return width
    }
    

    跟着长度的第二个是console.log(example(id))


    H5的输出
    小程序的输出

    所以建议在回调内//todo

    获得width,接下来就是绑样式的事了,就不说了
    //2019/5/10 该自适应方法宣告失败 原因有空再写

    相关文章

      网友评论

          本文标题:uni-app下input组件基于内容自适应宽度的实现

          本文链接:https://www.haomeiwen.com/subject/xbsboqtx.html