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

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 该自适应方法宣告失败 原因有空再写

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 上一篇我们讲了uni-app的各种优缺点,接下来我们要讲一下uni-app的开发流程和一些常用组件。此篇文章为un...
    任建堃阅读 19,660评论 0赞 28
  • uni-app跨平台框架官方教程 链接:https://ke.qq.com/course/343370 一、框架简...
    Neyo_凉阅读 36,751评论 0赞 43
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,355评论 1赞 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 29,232评论 1赞 45
  • 说明 :uni-app基于Vue 2.0实现,开发者需注意Vue 1.0 -> 2.0 的使用差异,详见从 Vue...
    瑟闻风倾阅读 29,899评论 0赞 8

友情链接更多精彩内容