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

【已解决】小程序中画同一行内的输入框和按钮

程序 crifan 620浏览 0评论
折腾:
【已解决】微信小程序开发工具中去画界面实现首页布局
期间,需要去小程序中实现这样的界面效果:
即,同一行内:
  • 左边是输入框
    • 输入了内容后,显示x,点击x可以清除已输入的内容
  • 右边是按钮
小程序 布局 input button 同一行
微信小程序 —— 多个view左右对齐的巧用方法(display:flex布局) – Wu_shuxuan的博客 – CSDN博客
实现两个按钮并列 – cpfor – CSDN博客
微信小程序-flex布局 – 简书
微信小程序控件之view的flex布局(1) – 简书
小程序组件 能不能不占一行啊?-微信小程序开发问答-微信小程序,小程序社区,小程序开发,微信小程序开发,微信小程序社区,微信开发者平台
先自己去试试
基础组件 · 小程序
-》
组件 · 小程序
表单组件 · 小程序
input · 小程序
视图容器 · 小程序
不论是:
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
还是:
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
都是竖着显示的。。。
试了半天:
.input_and_query{
  width: 80%;

  /* margin-left: 39px;
  margin-right: 39px; */
  /* padding-left: 39px;
  padding-right: 39px; */

  vertical-align: center;
}

#queryInput{
  font-size: 14px;
  border-radius: 16px;
  height: 38px;

  float:left;
  /* width:70%; */
}

#queryButton{
  font-size: 14px;
  border-radius: 16px;
  height: 38px;

  float:left;
  /* width:30%; */
}
效果是:
还是不对。
参考:
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
去试试把input放到form中
form · 小程序
发现也没有合适的左右布局。算了。
又试了试:
  <view class="section input_and_query">
    <input id="queryInput" type="text" placeholder="请输入要查询的英文绘本名称" value=""></input>
    <button id="queryButton">查询</button>
  </view>
.input_and_query{
  height: 28px;

  width: 80%;

  /* margin-left: 39px;
  margin-right: 39px; */
  /* padding-left: 39px;
  padding-right: 39px; */

  vertical-align: center;
}

#queryInput{
  font-size: 14px;
  border-radius: 8px;
  height: 28px;

  border: 1px solid #ced4da;

  float:left;
  width:75%;
}

#queryButton{
  margin-left: 10px;

  background-color: #61D2B3;

  font-size: 14px;
  border-radius: 8px;
  height: 28px;

  float:left;
  width:20%;
}
基本凑合了,效果:
但是按钮的字体 和input的字体 都不是居中,再去调整看看
小程序 button 垂直居中
微信小程序文字水平垂直居中对齐问题(完美解决方案) – 小猪佩奇工作室 – CSDN博客
【总结】
目前用:
.input_and_query{
  height: 28px;

  width: 80%;

  /* width: 100%; */
  /* margin-left: 39px;
  margin-right: 39px; */
  /* padding-left: 39px;
  padding-right: 39px; */

  vertical-align: center;
}

#queryInput{
  font-size: 13px;
  border-radius: 16px;
  /* height: 28px; */

  border: 1px solid #ced4da;

  float:left;
  width:75%;

  display: flex;
  align-items: center;
  justify-content: center;
}

#queryButton{
  margin-left: 5px;

  background-color: #61D2B3;

  font-size: 15px;
  border-radius: 16px;
  height: 28px;

  float:left;
  width:20%;

  display: flex;
  align-items: center;
  justify-content: center;
}
效果:
先凑合这没用吧。
虽然部分细节有出入,但是基本上没大问题。
如果需要,后续再优化细节。
【后记】
在后来基本上了解了flex布局后,再继续去优化输入框和按钮的布局:
希望能尽量和之前保持一致:
然后:
【已解决】小程序中view的宽度没有撑满屏幕宽度
再去优化内部布局:
结果调试半天还是有问题
去看:
Flex 布局教程:语法篇 – 阮一峰的网络日志
还是不行。
抽空继续优化布局。
目前发现用flex的值指定宽度,基本可用:
.input_and_query{
  height: 28px;
  vertical-align: center;
  margin-bottom: 44px;

  width: 100%;
  display: flex;
}

#queryInput{
  font-size: 13px;
  border-radius: 16px;
  margin-left: 39px;
  border: 1px solid #ced4da;

  /* flex:0 0 80%; */
  /* flex-grow: 4; */
  flex: 1 1 70%;
}

#queryButton{
  margin-left: 15px;
  margin-right: 39px;
  background-color: rgba(97, 210, 179, 0.8);
  font-size: 15px;
  border-radius: 16px;
  height: 28px;

  /* flex-grow: 1; */
  flex: 1 1 20%;
}
基本上达到了想要的布局:
对于和之前有些出入,等抽空再去优化吧。

转载请注明:在路上 » 【已解决】小程序中画同一行内的输入框和按钮

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.128 seconds, using 20.52MB memory