小程序-02 模板、组件

一、渲染

使用if/elif/else进行判断语句

html

<view wx:if="{{条件}}"> WEBVIEW </view>
<view wx:elif="{{条件}}"> APP </view>
<view wx:else> MINA </view>
data: view: 'MINA'

使用wx:for进行渲染模块，值可以是变量，也可以是数组

html

<view wx:for='{{arr}}' wx:key='{{index}}'>{{item}}</view>
<view wx:for='{{[1,2,3]}}'>

可以使用block标签进行渲染模板，block标签是一个特殊的标签，不会出现在页面上，最多的是做列表渲染，当然也可以直接使用渲染标签；

block不是一个组件，仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性；

html

<block wx:for=''>
    <view></view>
</block>

index和item是固定的，如果需要修改可以使用wx:for-item='itm'和wx:for-index='x'；

九九乘法表案例：

html

<view wx:for='{{list}}' wx:key='{{index}}' wx:for-item="x" class="lists">
    <text wx:for='{{list}}' wx:key='{{index}}' wx:for-item='y' wx:if='{{x>=y}}'>{{y}}*{{x}}={{x*y}}</text>
</view>

二、模板

相当于一个组件，定义name作为模板的名称，使用时用is来指定显示哪一个模板；

在小程序里，如果标签中没有内容，可以直接使用闭合标签；

html

<template name='tem'>
    <view>这是模板内容</view>
</template>
<template is='header'/>

引用模板

（1）使用import标签来引入；引入之后直接使用is，is等于引用进来的模板文件里定义的name名；引入可以不带后缀

html

<import src='../' />
<template is='' />   // 可以复制多个;

（2）使用include引用，会直接显示文件里除template标签外的内容。

html

<include src='../' />

import和include的区别：

import 可以引入模板template的内容
include在没有定义模板时使用，显示除template标签外的内容

也可以两个全部引入；

模板传值

在引入的标签上绑定data属性，在模板可以直接使用data绑定的属性变量，如果是对象，需要使用...扩展运算符；

html

<template src='' data='{{title}}'/>
<template src='' data='{{...obj}}' />

如果是include可以直接使用父组件的变量，不需要通过data绑定数据传值；

模板作用域 C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

三、常用组件

scroll-view：滚动视图组件，需要设置一个固定的高度，并允许某个方向滚动，属性：

scroll-x/y 开启横/竖向滚动；
scroll-top/left 设置滚动条初始位置，参数为数字；
enable-back-to-top ios点击顶部状态栏/安卓双击标题回到顶部；
bindscroll 滚动时触发的函数
scroll-into-view 滚动到设置的id位置;

swiper：轮播图组件，直接子元素旋转swiper-item组件；

indicator-dots 显示面板指示点 .wx-swiper-dots.wx-swiper-dots-horizontal可以选中指示点；
autoplay 自动切换
interval 自动切换时间间隔
circular 开启循环滚动，会加一张图；
vertical 开启纵向轮播图；

icon图标

type 指定显示的类型，只能是 success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size icon的大小，使用数字单位，默认23；
color icon的颜色；

progress 进度条；

percent 百分比进度，数字单位；
show-info 在进度条右侧显示百分比数字；
border-radius 圆角大小
activeColor 已选择进度条颜色
backgroundColor 未选择进度条颜色

button：按钮组件

size：default / mini 两种尺寸
type： default / primary / warn 修改按钮的颜色
plain： true 按钮透明背景
disabled：禁用
loading：带loading图标的按钮；
form-type：submit / reset 在form表单时，触发提交功能；
hover-class：按下去的样式；

（1）open-type：微信开放能力

contact：打开客服会话，可以绑定bindcontact(e)获取具体信息；
getPhoneNumber：获取用户手机号，绑定bindgetphonenumber获取信息；
getUserInfo：获取用户信息，绑定bindgetuserinfo获取信息；
feedback：意见反馈页面，用户可以获取信息；

image：图片组件

src：图片资源地址;
lazy-load：图片懒加载，布尔值；

（1）mode：图片裁剪、缩放模式

aspectFit：缩放模式，保持纵横缩放比，可以将图片完整的显示出来；（常用）
scaleToFill：不保持纵横缩放图片，使图片完全适应；
aspectFill：保持纵横缩放比，只保证图片短边能完全显示；

四、表单组件

form：表单控件；
需要给button添加form-type属性，提交表单需要添加name属性来作为key，在表单上添加value属性来作为值；

bindsubmit：触发提交事件；
bindrestet：触发reset事件；

input：输入框，默认没有边框；

password：是否为密码框；
placeholder-style：指定提示信息样式；
maxlength：最大输入长度；
focus：获取焦点；
adjust-position：键盘弹起时，是否自动上推页面；
bindinput：键盘输入时触发，相当于keyup；
bindfocus：获取焦点；
bindblur：失去焦点
bindconfirm：点击完成按钮触发；

（1）type：指定输入框类型

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

（2）confirm-type：设置键盘右下角的文字提示；

send：右下角按钮文字为发送
search /搜索、next /下一个、go /前往、done /完成；

label：绑定id属性，可以将输入控件直接包裹；
checkbox：复选框，多个复选框需要添加到checkbox-group，给group添加name属性，提交之后会获取到一个数组；
radio：单选框，多个使用radio-group包裹；
slider：滑动选择器；

min/max：设置范围；
step：步长；
value：当前值，
show-value：是否显示当前value；
bindchange：完成拖动触发；
bindchanging：拖动过程触发；

switch：开关选择器，返回一个布尔值；8. textarea：文本框，拥有大部分input属性；

auto-height：自动增高，设置之后style.height失效；
fixed：如果在position:fixed区域，则需要指定，否则不显示；

picker 底部弹起的滚动选择器；

bindcancel：取消选择时触发；
mode：指定类型

（1）selector：普通选择器；

range：指定一个数组，填写可选项；
value：表示数组下标是第几个；
bindchange： value改变时触发；

（2）multiSelector：多列选择器；

range：指定一个二维数组；
value： value也是一个数组，数组中的每一项代表一列的值；
bindcolumnchange：列改变时触发，返回信息会告知第几列，通过switch来进行判断，修改多列选择器的第二列数据；

（3）time：时间选择器；

vlaue：选中的时间，格式：hh:mm
start / end：限制时间；
bindchange：改变时触发；

（4）date：日期选择器；

fields：限制选项，year/month/day；当选择month时，只有year和month;

（5）region：省市区选择器

小程序-02 模板、组件 ​

一、渲染 ​

二、模板 ​

三、常用组件 ​

四、表单组件 ​

小程序-02 模板、组件

一、渲染

二、模板

三、常用组件

四、表单组件