小程序的input正常显示

【问题】最近在写小程序,遇到一个布局问题,在开发者工具的预览里,显示的正常的,但是在手机上的显示,就坑爹了~ (*T_T*) ,见图:

【解决】然后就开始了我的调整路途:

  1. 首先怀疑自带的样式,发现有个高度,去掉调试,没用。
  2. 再次怀疑是margin带来的问题,去掉调试,没用。
  3. 再度怀疑padding这些,全部去掉,没用。
  4. 我用了flex左右布局,发现也不是。
  5. 我上网查了下,发现有人说是别的组件影响的,我就把图片组件先隐藏掉,发现没事了,,呵呵。

【最后】我把图片用了定位,没事了??????????...

(有一些人反应小程序的图片显示有问题,我暂时还没有遇到,我是放在七牛上的。)

时间: 2024-11-24 17:45:20

小程序的input正常显示的相关文章

小程序里input宽度与文字显示的问题

不知道是不是bug,微信小程序里input宽度缩小,input可输入文字的区域会缩小的更多,比如说你把input宽度设置为90%,则input文字输入可显示的区域可能只有80%左右. //(存在疑点=>)目前的解决方法:在input输入框外面套一层view,通过改变view的宽度控制input的长度,这样不会影响文字显示 注意 input框上 不能加display:flex 属性 原文地址:https://www.cnblogs.com/panghu123/p/12178187.html

微信小程序给input、picker、textarea编写统一的更新数据逻辑

wepy开发小程序 以input为例,微信小程序没有数据双向绑定,input要显示绑定的数据即value等于一个绑定的量 <input type="text" value="{{inputdata}}"/> data = { inputdata: '数据' } 当在input中改变内容后,inputdata并不会变化,需要绑定事件,通过编写程序来改变inputdata. 但开发过程中如果input等表单控件很多的话,这些事件一个一个写就会感到很麻烦,所以

获取微信小程序的input控件的value

习惯了vue的方式,我以为javascript世界默认是双向绑定的.可...微信小程序除外,虽然显示值还是value={{jsproperty}}.整个文档也没有直接告诉你怎么去获取一个input的录入值,这几乎是所有文档中仅次于"hello world"的说明了. 如何获取呢?大体上两种办法: 一是利用控件本身的事件,不断的刷新data里的某个属性值,常用是bindinput.bindblur.前者是录入时处理,后者是控件失去焦点时处理.如果每个控件都需要一个绑定的方法,这当然是可怕

【微信小程序】tabBar不显示的问题

在app.json中配置了4个页面,在tabBar的list中随意写了两个页面,编译后发现不能显示tabBar. { "pages": [ "pages/musicList/musicList", "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextSty

小程序map多点定位显示

最近在做小程序的时候有一个类似共享单车显示附近单车的需求.查了查微信api发现api里多点定位描述的不清晰,试了试也不可以.静下心踩了几个坑后写了几个方法.分享一下??附上代码 html结构: <map id="map" scale="{{scale}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap&quo

小程序的image图片显示

最近接触到了一点小程序的东西,跟我们平常的HTML还真不太一样,这里我先大概讲一下图片的显示问题, 小程序的图片用的是<image><image/>标签,他默认的大小是宽300px,高225px.那我们如果用图片的话,肯定不能用默认的大小,那image常用的除了src属性之外,还有一个mode属性,他有4中缩放模式,9种剪裁模式,如果我们想把图片完全显示出来的话,就用 widthFix,宽度不变,高度自动变化,保持原图宽高比不变,下面我有两种方法可以显示完整不被拉伸的图片, 第一种

微信小程序判断input是否为空

微信小程序中用到input值时候,判断其内容是否为空,可以用if-else判断内容的length,也可以给input加点击事件,判断其内容:以下是我解决问题的过程wxml代码 <view class="name"> <text>姓名</text> <input type='text' placeholder='收货人姓名' value="{{userName}}" bindblur='username'></in

微信小程序图片宽100%显示并且不变形

<view class="meiti" style="background-color:red;"> <image src="http://10.0.0.171:9001/images/2017/0619/20170619110943813_progressive.jpg" mode="widthFix" style="width:100%;background-color:black;"

[小程序]微信小程序获取input并发送网络请求

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存入data属性变量中 2. 调用get请求发起网络请求调用wx.request发起网络请求 3.调用微信Toast接口展示结果 4.按钮绑定bindtap属性,当按钮点击的时候会调用对应的方法 index.wxml部分 <view class="indexInput"> <input maxlength="