微信小程序常用内置组件

<text>\n\n\n\n\n------------------------滚动视图部分---------------------</text>
<!-- 水平滚动 -->
<scroll-view scroll-x class="container-x">
    <view wx:for="{{10}}" wx:key="index" class="item01"></view>
</scroll-view>
<scroll-view scroll-y class="container-y">
    <view wx:for="{{10}}" wx:key="index" class="item02"></view>
</scroll-view>

<text>\n\n\n\n\n-------------------------Input部分-----------------------</text>
<input type="text" placeholder="请输入用户名" />
<input type="number" placeholder="请输入手机号" />
<input password/>
<input 
    type="text"
    bindinput="onInput"
    bindfocus="onFocus"
    bindblur="onBlur"
    bindconfirm="onConFirm"
/>

<text>\n\n\n\n\n-------------------------Image部分-----------------------</text>
<!-- 4）Image组件 -->
<!-- 
    1)image组件默认有大小  320 * 240
    2)image组件可单可双
    3)image是女组件
 -->
 <!-- <image></image>
 <image></image> -->



<!-- src属性  可以是本地  也可以远程   可以是相对  也可以绝对 -->
<image src="../../assets/001.jpg"></image>
<image src="/assets/002.jpg"></image>
<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2565119188,2804385591&fm=26&gp=0.jpg"></image>

<!-- 拍照 -->
<button bindtap="handleChooseAlbum">拍照/相册</button>
<image src="{{imgPath}}"></image>

 <!-- bindload 当图片载入完毕时触发 -->
 <!-- <image 
    wx:for="{{10}}" 
    src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2565119188,2804385591&fm=26&gp=0.jpg"
    bindload="handleImageLoad"
    lazy-load
></image> -->

<!-- show-menu-by-longpress 长按弹出菜单 -->
<image src="/assets/003.jpg" alt="" show-menu-by-longpress />


<text>\n\n\n\n\n-------------------------视图部分-------------------------</text>
<!-- 3）视图组件之View -->
<!-- view是男组件 -->
<view class="box">你好，小程序</view>
<!-- hover-class -->
<view hover-class="hover-box1">你好，小程序</view>
<view hover-class="hover-box2" hover-stay-time="3000" hover-stop-propagation="true">你好，小程序</view>

<text>\n\n\n\n\n-------------------------按钮部分-------------------------</text>
<!-- 2）Button组件 -->
<button>默认按钮</button>

<!-- size属性 -->
<button size="mini">小按钮</button>
<button size="mini">小按钮</button>

<!-- type属性 -->
<button size="mini" type="primary">按钮</button>
<button size="mini" type="warn">按钮</button>

<!-- 镂空效果 -->
<button size="mini" type="primary" plain="true">按钮</button>
<button size="mini" type="warn" plain="true">按钮</button>

<!-- 不可用 -->
<button disabled="true" size="mini" type="primary">小可用</button>

<!-- loading效果 -->
<button type="warn" size="mini" loading="{{true}}">按钮</button>

<!-- 选中的样式 -->
<button hover-class="pressed">按钮</button>

<!-- open-type -->
<button size="mini" type="primary" open-type="contact">客服</button>
<button size="mini" type="primary" open-type="share">分享</button>
<button size="mini" type="primary" open-type="getPhoneNumber">获取电话</button>
<button size="mini" type="primary" open-type="getUserInfo">获取用户信息</button>

<text>\n\n\n\n\n-------------------------文本部分-------------------------</text>
<!-- 1）Text组件 -->
<!-- 基本使用 -->
<text>首页面 \n</text>
<text>我的页面 \n</text>

<!-- 使用selectable设置文本是否可选 -->
<text selectable="{{true}}">长按选中 \n</text>
<text selectable>长按选中 \n</text>
<text selectable="{{false}}">长按选中 \n</text>

<!-- space 空格 -->
<text>hello world~ \n</text>
<text space="nbsp">hello world~ \n</text>
<text space="ensp">hello world~ \n</text>
<text space="emsp">hello world~ \n</text>
<text>你好，小程序~ \n</text>
<text space="nbsp">你好，小程序~ \n</text>

<!-- docode 是否解码 -->
<text>10 > 1 \n</text>
<text>10 &gt; 1 \n</text>
<text decode>10 &gt; 1 \n</text>
<text>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; \n</text>
<text decode>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>