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

先来看看效果图:

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. Java 7 新增功能

    Java 7 新增功能如下: 对二进制整数的支持,以0b或0B开头. 在数值中可以使用下划线,不管是整型数值,还是浮点型数值,都可以自由地使用下划线,这样可以直观地分辨数值常量中到底包含多少位.如:3 ...

  2. .htaccees什么鬼?怎么用?

    .htaccess文件全称Hypertext Access(超文本入口).提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.作 ...

  3. Embedding SQLite in a c programm

    Embedding SQLite in a c programm        The following program demonstrates how to embed SQLite into ...

  4. hibernate的事务和spring事务的区别 (转)

    spring事务: 对于传统的基于特定事务资源的事务处理而言(如基于JDBC的数据库访问),Spring并不会对其产生什么影响,我们照样可以成功编写并运行这样的代码.同时,Spring还提供了一些辅助 ...

  5. SDUT OJ 2607

    /*http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2607*/ 题目大意:给出一个字符串,求出里 ...

  6. SQL学习笔记之MySQL索引知识点

    0x00 概述 之前写过一篇Mysql B+树学习,简单的介绍了B+数以及MySql使用B+树的原因, 有了这些基础知识点,对MySql索引的类型以及索引使用的一些技巧,就比较容易理解了. 0x01 ...

  7. WCF使用安全证书验证消息加密

    首先安装 服务端安全证书  代码如下:  // 下面第一行是安装证书,第二行是将证书列入信任 makecert.exe -sr LocalMachine -ss MY -a sha1 -n CN=lo ...

  8. (转)C#自制Web 服务器开发:用C#开发自己的Web服务器

    当输入:127.0.0.1:5050 GET / HTTP/1.1 Accept: text/html, application/xhtml+xml, */* Accept-Language: zh- ...

  9. Jenkins 集成Ansible教程

    前提条件: 1. 部署Jenkins Server 2. 部署 Ansible Server 一.在Jenkins安装SSH插件 系统管理 -> 插件管理 二.在Jenkins 凭证中添加Ans ...

  10. SaltStack高可用multi-master-第十三篇

    multi-master官方介绍 As of Salt 0.16.0, the ability to connect minions to multiple masters has been made ...