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

来自CloudWiki
跳转至: 导航搜索
(创建页面,内容为“==WXML代码== <nowiki> <view><text>请输入第1个数字:</text><input type="number" /></view> <view><text>请输入第2个数字:</text><input type="number"…”)
 
第21行: 第21行:
  
 
[[文件:wexin2021092701.png]]
 
[[文件:wexin2021092701.png]]
 +
 +
==WXSS==
 +
 +
<nowiki>
 +
.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组件内的前面插入内容</nowiki>
 +
 +
===选择器使用演示===
 +
element:
 +
 +
<nowiki>view {
 +
  margin: 20px;
 +
}</nowiki>

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

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;
}