小程序模板和组件的区别（点击 *** 作事件）

小程序在使用时，经常会在不同的页面用到相同的页面结构，这个时候我们如果一个个写的话没有必要，这个时候可以使用模板（template）或者组件（component）。

二者区别 在于：

1、需要定义模板：一个template.wxml文件中能写多个模板，用name区分，

下面定义两个模板

2、使耐迅庆用这两个模板，在对应的wxml文件引入：

3、上面在模板content里定义了点击事件subtractNum方法，因为template中没有js文件，因此template中的点击事件，在使用页面中的js里定义。

建议将有子列表昌握 *** 作交互的写成component。

示例：

对应组件的wxml跟page里的wxml一样：

2、使用自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值昌裤。

下一节将进入如何 组件向父级传值（组件通信）

本文为实际工禅基哪作简记，粗陋小笔记一篇，仅供参考。

小程序填写表单的过程中，手机键盘调起，默认情况，键盘顶部会紧贴着表单项。

如图所示：

当遇到这样的场景：

表单项输入的内容，作为关键字，向后台请求匹配数据列表。拿到数据后，在表单项下方展示列表数据，供用户点选。

就会出现问题：

展示在 input 下面的列表，会被键盘完全挡住贺码。

1、获取焦点时，使用 input 组件的 cursor-spacing 属性，设置键盘和 input 组件的间距。

2、失去焦点时，计算页面已经向上滚动的距离，加上列表项的锋冲高度，手动将整个页面向上推，防止处于页面底部的 input  失去焦点时、又掉回页面底部。影响用户体验。

手动将整个页面向上推的方式：

【注意】

wx.pageScrollTo 仅在 page 组件中有效，component 中无效！

1、在当前 input 获取焦点的时候，手动将页面向上、滚动 列表高度 那么大的距离。

2、如何滚动？