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

消息提示框 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 - 指定点击时的样式

源码下载

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2016-10-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React-Native组件之 TabBarIOS和TabBarIOS.Item

TabBarIOS 组件简介 目前的APP内,大部分都是选项与选项之间切换,比如:微信、微博、QQ空间…,在iOS中,我们可以通过TabItem类进行实现,那么...

361100
来自专栏杨龙飞前端

checkbox的常见问题

24350
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:手机应用的TextTabBar快速实现方式

设置控件字体的颜色,将该属性设置为“95, 100, 110”,表示RGB颜色,如图2;

9340
来自专栏LeeCen

UIScrollView控件实现图片轮播

12310
来自专栏闻道于事

其他标签及框架集

今天学习了其他一些标签以及框架集。 <marquee> ... </marquee> 1 <marquee direction="down" heigh...

32970
来自专栏无所事事者爱嘲笑

不定高元素的高度transition动画实现

42040
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——ImageTabBar控件的使用方式

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写ImageResourceID(菜单项图片名称),SelectImageResourceID(...

8130
来自专栏python3

tkinter -- Event(1)

分别测试鼠标的 Relase 事件,只有当鼠标被 Relase 后移动才回产生 Relase 事件

6810
来自专栏一“技”之长

标签之美十——用户交互元素 原

任何一个网页都会提供用户交互的功能,包括账号密码的提交,留言板等用户信息的的获取。

9230
来自专栏做全栈攻城狮

.Net程序员快速学习安卓开发-布局和点击事件的写法

我们新建一个layout布局文件时,默认就是相对布局。相对布局是相对于非相对布局来说的。顾名思义,相对布局就是 相对于某些控件位置的布局。所有的控件都是相对位置...

14640

扫码关注云+社区

领取腾讯云代金券