今天主要是简单的讲一下小程序当中的一些组件,微信文档上也是有的。但我还是坚持写一下,因为写博客可以再一次得到提高,印象更深刻,虽然很简单,但贵在坚持。

先来看看效果图:

1:进度条(progress)

<progress percent='25' show-info='true'></progress>

<progress percent='35' stroke-width='12' active='true'></progress>

<progress percent='55' color='green' backgroundColor='red'></progress>

percent:百分比(0-100)

show-info:是否显示百分比

进度条的颜色,加载完成的颜色和未完成的颜色都是可以自定义的。

2:滑动选择器(slider)

<view>
<slider bindchange='sliderChang1' step='5' show-value='true'></slider>
</view>

bindchang:完成拖动后触发的事件

step:间隔 取值必须大于0 ;

show-value:是否显示当前的value

3:开关选择器(switch)

<view>Switch</view>
<view class="switch_cm">
<text>声音是否开启</text>
<switch class='switch_meld' checked='true' bindchange='switchChange'></switch>
</view>

4:开关选择器(radio)单选按钮

<view>radio</view>
<view>
<radio-group>
<radio class='boy' checked='true'>男</radio>
<radio class='girl'>女</radio>
</radio-group>
</view>

和Html中的相同

5:复选框(Checkbox)

<view>Checkbox</view>
<checkbox-group>
<checkbox>选项1</checkbox>
<checkbox>选项2</checkbox>
</checkbox-group>

微信小程序------基本组件的更多相关文章

  1. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  2. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

  3. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  4. 5个最优秀的微信小程序UI组件库

    开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...

  5. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  6. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  7. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  8. 微信小程序UI组件库 iView Weapp快速上手

    概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...

  9. 6个最优秀的微信小程序UI组件库

    开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...

  10. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

随机推荐

  1. 宏表达式与函数、#undef、条件编译、

    宏表达式在预编译期被处理,编译器不知道宏表达式的存在. 宏表达式没有任何的调用开销 宏表达式中不能出现递归定义. C语言中强大的内置宏 __FILE__:被编译的文件名 //双底线 __LINE__: ...

  2. 页面中的CSS性能优化

    大型网站中会有多个CSS文件,性能优化是不要的.主要有以下几个方法: 一:压缩样式表: 通过构建工具压缩CSS文件,能够减少文件的大小,从而得到更快的下载.解析和执行.对于使用预处理器例如 Sass, ...

  3. Mac下的Mysql无法登陆的问题

    以下是还原root权限和更改root密码的最便捷方法. 1:装mysql workbench .可视化界面直接操作. 2:苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭my ...

  4. zabbix 4.0 安装配置

    1.安装软件包: 1.安装软件包: yum install -y httpd mariadb-server mariadb php php-mysql php-gd libjpeg* php-ldap ...

  5. iClap助力移动互联网企业高效实现规范化管理

    移动互联网的迅速崛起,智能移动客户端深刻而全面地影响着人类生活与工作习惯.而企业办公已从原始的纸张办公,到固定PC办公,跨入到一个应用范围更广.效率更高的移动办公时代.由静生动,让企业办公更加人性化和 ...

  6. rz时提示command not found

    -bash: rz: command not found rz命令没找到? 执行sz,同样也没找到.     安装lrzsz: # yum -y install lrzsz   现在就可以正常使用rz ...

  7. Android Camera API ISO Setting

    https://stackoverflow.com/questions/2978095/android-camera-api-iso-setting exif this.mCameraParamete ...

  8. CSS 图像透明/不透明

    CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 一.示例一:创建一个透明图像 CSS3中属性的透明度是 opacity. ...

  9. spring手动配置

    本文总结自:https://www.cnblogs.com/V1haoge/p/7183408.html SpringBoot中免除了大部分配置,但是对于一些特定的情况,还是需要我们进行手动配置的. ...

  10. 再也不学AJAX了!(二)使用AJAX

    在上一篇文章中我们知道,AJAX是一系列技术的统称.在本篇中我们将更进一步,详细解释如何使用Ajax技术在项目中获取数据.而为了解释清楚,我们首先要搞清楚我们是从哪里获取数据的,其次我们关注的才是获取 ...