微信小程序开发日记(三)

https://developers.weixin.qq.com/miniprogram/dev/component/

一. 视图容器组件

1. <view> 基础视图组件

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

2. <scroll-view> 滚动视图组件

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

  • 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

  • 使用横向滚动时,需要给scroll-view一个固定宽度，通过 WXSS 设置 width。或者设置white-space:nowrap 同时给子元素设置 display:inline-block

  • scroll-into-view可设置默认滚动到的位置, 为一个子元素绑定id 传给scroll-into-view即可

  • scroll-with-animation可以添加滚动动画

3. <swiper>和<swiper-item> 轮播图

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

  • easing-function可以调整动画效果

4. <movable-area>和<movable-view> //可滑动区域

https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

5. <cover-view>覆盖视图层

  • 可以覆盖在 map、video、canvas、camera、live-player、live-pusher组件上
  • 里面可以放:文本\ 按钮
  • 可以嵌套 cover-view、cover-image

6. <cover-image> 覆盖图片

注意:不支持BASE64和SVG

二. 基础组件

1. <icon> 图标

图标总共以下几种:success, success_no_circle, info, warn, waiting, cancel, download, search, clear

2. 进度条

https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

  • 进度条关键属性 :percent 百分比 show-info显示百分比
  • active 进度条动画 active-mode 动画播放方式:backwards: 动画从头播；forwards：动画从上次结束点接着播
  • duration 进度增加1%所需毫秒数
  • bindactiveend 动画完成事件

三. 表单组件

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容