微信小程序示例 - 交互组件

消息提示框 toast

代码结构

<toast bindchange="...">
    消息内容
</toast>

属性

• duration - 消息显示的时间，单位毫秒，默认值 1500
• bindchange - duration 时间到期后触发的事件

进度条 progress

代码结构

<progress percent="20" />

属性

• percent - 百分比0~100
• show-info - 显示百分比
• stroke-width - 进度条宽度，单位px
• color - 进度条颜色
• active - true/false 是否显示动画

底部菜单表 action-sheet

代码结构

<action-sheet>
  <action-sheet-item>xxx</action-sheet-item>
  ...
  <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

中包含多个子选项 ，还有一个取消按钮

属性

• bindchange - 点击背景或 action-sheet-cancel 按钮时触发 change 事件

模态弹窗 modal

代码结构

<modal title="标题" confirm-text="confirm"...>
  这是对话框的内容。
</modal>

属性

• title - 标题
• no-cancel - 是否隐藏 cancel 按钮
• confirm-text - confirm 按钮文字
• cancel-text - cancel-text
• bindconfirm - 点击 confirm 触发的事件
• bindcancel - 点击 cancel 以及蒙层触发的事件

导航 navigator

代码结构

<navigator url="navigate?title=navigate">
跳转到新页面
</navigator>

属性

• url - 跳转链接
• redirect - true/false，是否关闭当前页面
• hover-class - 指定点击时的样式

源码下载