微信小程序入门学习记录（1）

最新推荐文章于 2023-09-12 14:06:17 发布

原创最新推荐文章于 2023-09-12 14:06:17 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序页面布局 #小程序input布局实现

微信小程序入门学习专栏收录该内容

1 篇文章

订阅专栏

本文分享了作者在实现一个特定的小程序页面过程中遇到的问题及解决方案，包括如何正确设置背景颜色、调整元素位置以及处理输入框宽度等问题。

实现数录入页面效果如图

记录一下自己实现这个页面犯的错

1、实现上下两个块颜色背景

最开始的思路是用过一个总的view包括两个子view，然后通过分布设置子view的heigh属性为50%，上方子view设置颜色为绿色下方为白色测试发现不起作用根本看不到两个子view显示。

原因：

通过测试是因为view是视图容器，里面如果没有布局元素就不会显示。

解决：

当我在背景子View里面布局了input输入框单位文本元素后，背景颜色能正常显示出来了。然后通过WXSS设置view属性Padd-bottom和Padding-top属性。让里面的子元素相对于容器VIEW上下距离，然后通过屏幕具体高度设置达到预期绿色背景要的高度就行了。

2、布局上的静态文字可以在xml文件直接写，不需要用<text>标签至于他的大小风格什么的可以在他的容器view里面里面设置

3、实现单位输入Input 单位水平布局

我在input和单位元素父容器View设置这这个属性flex-direction: row;理论是上里面的元素都会水平显示但结果是下面的情况

结果的确水平显示了但cm跑到了input前面了。为什么不能水平顺序排列呢？于是我就对cm<text>元素设置了position: absolute;right: 40rpx;属性代码他的作用是此控件布局为绝对布局。并且让其相对于屏幕右边距离40rpx（注：rpx是小程序屏幕大小适配单位）值；然后cm就顺利跑到了右边去了。

3、input的width的比例宽度设置过高会把右边元素往下一行挤导致换行，遇到这种情况的时候。看看是不是自己的input的宽度比例是不是设置得太大了。

代码

wxml代码：

<view class='sy'>
<view class='sy'>
</view>
<view class='xy'>
<view class='sg'>  身高：
<input class='sginput' type='digit'></input> 
<text class='sgdw'>cm</text>
</view>
<view class='sg'>  体重：
<input class='sginput' type='digit'></input> 
<text class='sgdw'>kg</text>
</view>
<view class='line'></view>
<view class ='bz'>
标准：
<text class='bzdw'>中国标准 ></text>
</view>
</view>
</view>

wxss代码：
.sy{
width: 100%;
height: 45%;
background: #40E0D0;
}
.xy{
width: 100%;
padding-bottom: 80rpx;
padding-top: 80rpx;
background: #40E0D0;
color: #ffffff;
font-size: 35rpx;
}
.sg{
  width: 100%;
  height: auto;
  flex-direction: row;
  padding-left: 40rpx;
  padding-right: 40rpx;
  margin-top: 40rpx;
}
.sginput{
  font-size: 28rpx;
  float: right;
  width:40%;
  margin-right: 30%;
  background: #E8E8E8
}
.sgdw{
  position: absolute;
  right: 40rpx;
 
}
.bzdw{

 position: absolute;
  right: 40rpx;
  color: #EE5C42
}
.line{
  width: 92%;
  height: 2rpx;
  margin-top: 40rpx;
  margin-left: 4%;
  background: #DCDCDC;
}
.bz{
  width: 100%;
  height: 60 rpx;
  padding-left: 40rpx;
  padding-right: 40rpx;
  margin-top: 35rpx
}