“小程序案例：比较数字大小”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
第52行： 第52行：
 
   content: "测试";
 
   content: "测试";
 
}</nowiki>
 
}</nowiki>
 +
 +
 +
==尺寸单位==
 +
rpx 和px :
 +
 +
使用rpx:
 +
 +
<nowiki>
 +
view {margin: 50rpx;}
 +
input {
 +
  width: 600rpx;
 +
  margin-top: 20rpx;
 +
  border-bottom: 2rpx solid #ccc;
 +
}
 +
button {margin: 50rpx;}
 +
</nowiki>
 +
 +
使用px:
 +
 +
<nowiki>
 +
view {margin: 50rpx;}
 +
input {
 +
/* 此处将原来的600rpx改为300px */
 +
  width: 300px; margin-top: 20rpx;
 +
  border-bottom: 2rpx solid #ccc;
 +
}
 +
button {margin: 50rpx;}
 +
</nowiki>
 +
 +
可以看到使用rpx 在不同设备上 使用，效果都非常接近

2021年9月27日 (一) 13:33的版本

WXML代码

<view><text>请输入第1个数字：</text><input type="number" /></view>
<view><text>请输入第2个数字：</text><input type="number" /></view>
<button>比较</button>
<view><text>比较结果：</text></view>

input组件的可选值： 

text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘

注： 

 <view>和<text>属于双边标签，由开始标签和结束标签两部分构成，<input>属于单边标签，只有“开始标签”，且结尾用“/>”表示。值得一提的是，<input>也可以写成双边标签，如“<input></input>”

设input组件type属性值为number：

Wexin2021092701.png

WXSS

.class	.container	选择所有class="container"的组件
#id	#id	选择id="#id"的组件
element	view	选择所有view组件
element, element	view, text	选择所有view组件和所有text组件
::after	view::after	在view组件内的后面插入内容
::before	view::before	在view组件内的前面插入内容

选择器使用演示

element: 

view {
  margin: 20px;
}

类选择器： 

.container {
  margin: 20px;
}
after选择器:
view::after {
  content: "测试";
}


尺寸单位

rpx 和px :

使用rpx: 

view {margin: 50rpx;}
input {
  width: 600rpx;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button {margin: 50rpx;}

使用px: 

view {margin: 50rpx;}
input {
/* 此处将原来的600rpx改为300px */
  width: 300px; margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button {margin: 50rpx;}

可以看到使用rpx 在不同设备上 使用，效果都非常接近

取自“http://www.openbrains.net/mediawiki/index.php?title=小程序案例：比较数字大小&oldid=28367”