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

先来看看效果图:

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. Linux系统的SVN客户端使用技巧详解

    忽略文件/文件夹 假设想忽略文件temp,cd到temp所在的目录下: $ svn propedit svn:ignore . [注意:请别漏掉最后的点(.表示当前目录),如果报错请看后面] 打开的文 ...

  2. glib简单记录包括字符串,主循环,回调函数和xml解析

    一.将最近用到的glib字符串功能整理了下直接用程序记录比较好看懂 #define MAX_LEN 100gchar * demo (char* msg, ...){    gchar * pcfgf ...

  3. FileLoadTools

    /** * Created by dev013 on 9/9/14. */ var FileLoadTools = (function () { var my = {}; var htmlFile = ...

  4. delphi 正则表达式

    常用正则表式 正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的 ...

  5. 设置eclipse启动时所需要的jdk

    eclipse启动时默认的时环境变量中的JDK,但如果环境变量中的jdk版本比较低,那么eclipse是启动不了的, 比如系统中运行的程序中使用的是jdk1.7,但eclipse版本2018需要jdk ...

  6. HDU 5963 朋友(树+博弈)

    #include<vector> #include<cstdio> #include<cstring> #include<algorithm> #def ...

  7. maven tomcat7-maven-plugin配置及背景

    背景: 在研发阶段,想让一个服务通过tomcat启动起来有很多的方法,常用的idea都有这样的支持,那么如果我们没有tomcat,能不能让服务通过tomcat启动起来呢?maven就提供了这样的支持. ...

  8. cdoj1633 去年春恨却来时,落花人独立,微雨燕双飞

    地址:http://acm.uestc.edu.cn/#/problem/show/1633 题目: 去年春恨却来时,落花人独立,微雨燕双飞 Time Limit: 3000/1000MS (Java ...

  9. JAVA中hashmap的分析

    从http://blog.csdn.net/luanlouis/article/details/41576373?utm_source=tuicool&utm_medium=referral学 ...

  10. 使用selenium前学习HTML(2)——标签

    <!-- HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. HTML 段落是通过 <p> 标签进行定义的. HTML 链接是 ...