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