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

先来看看效果图:

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. UVA10700:Camel trading(栈和队列)

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/J 题目大意: 给一个没有加上括号的表达式且只有+ , ...

  2. fork和multiprocessing

    多任务理解 单核cpu完成多个cpu的切换 时间片轮转 优先级调度 并发看上去一起执行 并行一起执行 调度算法 什么样的情况下用什么样的规则让谁去执行. 一般情况下电脑都是并发的 进程的创建-fork ...

  3. 运输层协议--TCP及UDP协议

    TCP及UDP协议 按照网络的五层分级结构来看,TCP及UDP位于运输层,故TCP及UDP是运输层协议.TCP协议--传输控制协议UDP协议--用户数据报协议 多路复用及多路分解 图多路复用及多路分解 ...

  4. Winter-1-F Number Sequence 解题报告及测试数据

    Time Limit:1000MS     Memory Limit:32768KB Description ​A number sequence is defined as follows:f(1) ...

  5. curl 命令返回json结构human readable

    在curl命令后面添加 | python -m json.tool 不想显示curl的统计信息,添加 -s参数 例: curl https://news-at.zhihu.com/api/4/news ...

  6. 谷歌技术"三宝"之MapReduce(转)

    原文地址:http://blog.csdn.net/opennaive/article/details/7514146 江湖传说永流传:谷歌技术有"三宝",GFS.MapReduc ...

  7. Docker-初始docker

    一.什么是Docker Docker 在容器的基础上,进行了进一步的封装,从文件系统.网络互联到进程隔离等等,极大的简化了容器的创建和维护.使得 Docker 技术比虚拟机技术更为轻便.快捷. 下面的 ...

  8. Python学习笔记之函数参数传递 传值还是传引用

      在学完Python函数那一章节时,很自然的的就会想到Python中函数传参时传值呢?还是传引用?或者都不是? 在回答上面的问题之前我们先来看看下面的代码: 代码1: def foo(var): v ...

  9. [pixhawk笔记]8-半物理仿真环境

    通过半物理仿真,可以在不试飞的情况下对飞控的软硬件进行部分验证,下面结合文档对半物理仿真环境的搭建和运行进行学习.先跑起来再说. Pixhawk支持多轴和固定翼的仿真,多轴用jMavSim,固定翼用X ...

  10. BZOJ3150: [Ctsc2013]猴子

    传送门 这题好神啊..好神啊.. 首先得到简单的DP方程: $f_{\{ i \}}=\frac{\sum_{i \ne j} f_ {\{ i,j \}} \times P_{(i,j)}}{N-1 ...