最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】小程序中view的宽度没有撑满屏幕宽度

程序 crifan 2091浏览 0评论
折腾:
【已解决】小程序中画同一行内的输入框和按钮
期间,发现个很奇怪的现象:
代码:
  <view class="input_and_query">
    <input
      id="queryInput"
      bindinput='inputCallback'
      bindconfirm="inputConfirmCallback"
      type="text"
      placeholder="请输入要查询的英文绘本名称"
      value="">
    </input>
    <button id="queryButton" bindtap="submitQuery">查询</button>
  </view>
和:
  height: 28px;
  margin-bottom: 16px;
}
此处input_and_query没有设置宽度:
默认以为会撑满整个屏幕的宽度才对,但是实际上的显示效果却是:
只有屏幕的大概一半左右宽度:
当前view的显示宽度,没有撑满整个屏幕宽度
由此导致view内部子元素的宽度都不对了。
小程序 view 宽度 没有满屏幕宽度
微信小程序页面使内容充满整个屏幕(高度、宽度100%),并使内容水平和竖直都居中 – dKnightL的博客 – CSDN博客
微信小程序设置宽高100%不起作用 – 小风程序员的博客 – CSDN博客
微信小程序 设置height 100%不起作用 – wshpwangshiyu的专栏 – CSDN博客
微信小程序填坑之路之宽高设置百分比无效果-微信小程序俱乐部 www.wxappclub.com
http://www.wxappclub.com/topic/206
大概明白了:
之前设置width为100%一直不对,是因为没有供参照的父元素
而父级的根元素是page,page没有设置宽度,所以应该去:
给page加上个:height: 100%
不过此处暂时没有,而是:
新手布局福音!微信小程序使用flex的一些基础样式属性 – 知乎
难道需要给container元素,加上个:
width: 100%;
但是记得之前也试过,好像没用。
不过此处再去试试:
.input_and_query{
  height: 28px;
  width: 100%;
}
就可以了:
【总结】
之前试过很多次,加width为100%,好像都没生效 -》估计是当时不理解flex布局,导致加到子元素中了;
现在大概明白了flex布局,加到父元素,此处的input_and_query:
.input_and_query{

}
即可实现控制父元素的宽度是整个屏幕了:

转载请注明:在路上 » 【已解决】小程序中view的宽度没有撑满屏幕宽度

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
80 queries in 0.173 seconds, using 22.08MB memory