组件的用法

组件的创建：

在根目录上创建components，创建后会自动生成相应的.wxml,wxss,.json,.js文件

组件的引入：（建议 全部使用class选择器）

局部引入（在 页面的.json文件中配置）

如：

路径名字必须准确

全局引入：（在app.json中进行配置）

同样路径名必须准确

组件和页面的区别：

数据方法和属性：

用于组件模版渲染的数据需要定义在date中

用于事件处理和自定义的方法的需要定义在methods中

均放于页面的.js文件中

接受外界传输到组件的数据定义在properties中

也放于.js文件中

使用 setData 修改 properties 的值与在date中修改方法一致

常用组件：

view：

hover-class，值为字符串类型，用于指定组件被按下时的样式；
hover-stop-propagation，值为boolean类型，用于指定是否阻止本节点的祖先节点出现点击状态；
hover-start-time，值为数字类型，用于指定按住后多久出现点击状态，单位为毫秒；
hover-stay-time，值为数字类型，用于指定手指松开后点击状态保留的时长，单位为毫秒；
 

如：

实现该效果：

scroll-view：

属性    类型    默认值    必填    说明
scroll-x    boolean    false    否    允许横向滚动
scroll-y    boolean    false    否    允许纵向滚动
upper-threshold    number/string    50    否    距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold    number/string    50    否    距底部/右边多远时，触发 scrolltolower 事件
bindscroll    eventhandle        否    滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
bindscrolltoupper    eventhandle        否    滚动到顶部/左边时触发
bindscrolltolower    eventhandle        否    滚动到底部/右边时触发
upper-threshold    number/string    50    否    距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold    number/string    50    否    距底部/右边多远时，触发 scrolltolower 事件
refresher-enabled    boolean    false    否    开启自定义下拉刷新
bindrefresherrefresh    eventhandle        否    自定义下拉刷新被触发
refresher-triggered    boolean    false    否    设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
 

如：

.wxml中

.wxss中

.js中

轮播图：

可以实现滑动的效果

滚动图：

可以通过第二张标中的事件来定义方法来进一步的实现