2、小程序基础二

<!-- pages/page/page.wxml -->
<!-- block组件 -->
<block wx:for="{{2}}" wx:key="*this">
    <text>{{ item }}</text>
</block>
<!-- 其他组件 -->
<view wx:for="{{2}}" wx:key="*this">
    <text>{{ item }}</text>
</view>

user-select：boolean类型，表示文本是否可以选中；
space：字符串类型，设置空格的长度类型；
    ensp：中文字符空格一半大小；
    emsp：中文字符空格大小；
    nbsp：根据字体设置的空格大小；
decode：Boolean类型，表示是否解码，可解码的特殊字符有&nbsp、&lt、&gt、&amp、&apos、&ensp、&emsp；

<!--pages/page/page.wxml-->
<view>
    <text user-select>文本可选</text>
</view>
<view>
    <text space="emsp">空格长度 emsp</text>
</view>
<view>
    <text space="ensp">空格长度 ensp</text>
</view>
<view>
    <text decode>字符&nbsp;解码</text>
</view>

size：字符串类型，设置按钮的大小，default为默认大小，大尺寸，mini为小尺寸；
type：字符串类型，设置按钮的样式类型，primary为绿色，default为白色，warn为红色；
plain：布尔值类型，表示按钮是否镂空，背景色透明(除边框)；
disabled：布尔值类型，表示按钮是否禁用；
loading：布尔值类型，表示按钮名称前是否现实loading图标；
form-type：字符串类型，用于form组件，点击分别会触发form组件的submit/reset事件；
hover-class：字符串类型，指定按钮按下去的样式类，默认为none没有点击态效果；
hover-stop-propagation：布尔值类型，指定是否阻止本节点的祖先节点出现点击态；
hover-start-time：字符串类型，按住后多久出现点击态效果，单位毫秒，默认20毫秒；
hover-stay-time：字符串类型，表示按钮松开后点击态保留多长时间，单位毫秒，默认70毫秒；

<!--pages/page/page.wxml-->
<button hover-class="active" size="mini" hover-class="active">测试</button>

hover-class：字符串类型，用来设置按下去的样式类，当hover-class="none"时，没有点击态效果；
hover-stop-propagation：布尔值类型，指定是否阻止本节点的祖先节点出现点击态，说白了就是冒泡事件传递，默认不阻止；
hover-start-time：数字类型，表示按住后多久出现点击态，单位毫秒，默认50毫秒；
hover-stay-time：数字类型，表示手指松开后点击态保留时间，单位毫秒，默认400毫秒；

scroll-x：boolean值，默认为false，表示开启横向滚动，此时我们需要元素向右撑开scroll-view的默认宽度；
scroll-y：boolean值，默认为false，表示开启纵向滚动，此时我们需要元素向下撑开scroll-view的默认高度；
upper-threshold：number或string值，默认50，表示距顶部或左边多远时，触发scrolltoupper事件；
lower-threshold：number或string值，默认50，表示距底部/右边多远时，触发scrolltolower事件；
scroll-top：number/string值，设置竖向滚动条位置；
scroll-left：number或string值，设置横向滚动条位置；
enable-flex：boolean值，默认false，表示是否启用flexbox布局，开启后，当前节点声明了display: flex就会成为flex container，并作用于其孩子节点；

<!-- pages/page/page.wxml -->
<scroll-view style="height: 100px;" scroll-y>
    <view style="height: 100px;background-color: red;">
        <text>1</text>
    </view>
    <view style="height: 100px;background-color: green;">
        <text>1</text>
    </view>
</scroll-view>

<!-- pages/page/page.wxml -->
<scroll-view style="height: 100px;display: flex;" scroll-x enable-flex>
    <view style="width: 100px;height:100px;background-color: red;flex-shrink: 0;"/>
    <view style="width: 100px;height:100px;background-color: green;flex-shrink: 0;"/>
    <view style="width: 100px;height:100px;background-color: blue;flex-shrink: 0;"/>
    <view style="width: 100px;height:100px;background-color: blueviolet;flex-shrink: 0;"/>
</scroll-view>

src：字符串类型，设置图片的资源地址；
mode：字符串类型，设置图片裁剪或缩放的模式；
    scaleToFill：默认值，表示不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素；
    aspectFit：表示保持纵横比缩放图片，使图片的长边能完全显示出来，也就是说，可以完整地将图片显示出来；
    aspectFill：表示缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取；
    widthFix：表示宽度不变，高度自动变化，保持原图宽高比不变；
    heightFix：表示高度不变，宽度自动变化，保持原图宽高比不变；
    top：表示不缩放图片，只显示图片的顶部区域；
    bottom：表示不缩放图片，只显示图片的底部区域；
    center：表示不缩放图片，只显示图片的中间区域；
    left：表示不缩放图片，只显示图片的左边区域；
    right：表示不缩放图片，只显示图片的右边区域；
    top left：表示不缩放图片，只显示图片的左上边区域；
    top right：表示不缩放图片，只显示图片的右上边区域；
    bottom left：表示不缩放图片，只显示图片的左下边区域；
    bottom right：表示不缩放图片，只显示图片的右下边区域；
show-menu-by-longpress：布尔值类型，表示长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序(若图片中包含对应二维码或小程序码)的菜单；
binderror：值为事件回调函数，表示当图片加载失败时，会回调对应的事件处理函数，且在event对象内加入detail属性，加载错误的信息；
bindload：值为事件回调函数，表示当图片加载完成时，会回调对应的事件处理函数，且在event对象内加入detail属性，该属性是一个对象，里面存储图片的高和宽信息；

type：字符串类型，指定icon的类型，有效值为success、success_no_circle、info、warn、waiting、cancel、download、search、clear；
size：number/string值，默认23px，指定icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)；
color：字符串类型，指定icon的颜色，同css的color；

<!-- pages/page/page.wxml -->
<view>
    <icon type="success" />
    <icon type="success_no_circle" />
    <icon type="info" />
    <icon type="warn" />
    <icon type="waiting" />
    <icon type="cancel" />
    <icon type="download" />
    <icon type="search" />
    <icon type="clear" color="red"/>
</view>

id：字符类型，组件唯一的标识；
class：组件的样式类；
style：组件的内联样式；
hidden：组件是否显示；
data-var_name：自定义属性，当组件触发事件时，该属性值，会在回调事件函数时，以参数的形式发送给回调函数，然后在事件回调函数中，我们可以通过event.target.dataset.var_name获取这个数据；
bind*/catch*：组件事件；

<!-- pages/page/page.wxml -->
<input type="text" model:value="{{ counter }}" />
<button size="mini" type="primary" bindtap="changeText">修改数据</button>
// pages/page/page.js
Page({
  data: {
    counter: 1
  },
  changeText() {
    this.setData({
      counter: this.data.counter + 1
    })
  }
})

小程序样式优先级：行内样式 -> 页面样式 -> 全局样式

<!-- pages/page/page.wxml -->
<view style="width: 100rpx;height: 100rpx;background-color: red;"/>
<view style="width: 50px;height: 50px;background-color: blue;"/>