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

先来看看效果图:

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. C的指针疑惑:C和指针8数组

    ]; ]; 上面申明两个数组,不能进行以下赋值 b = a; 你不能使用赋值符把一个数组的所有元素复制给另一个数组,必须使用一个循环,每次复制一个元素 数组和指针 ]; int *b; 声明一个数组, ...

  2. PAT 1089 Insert or Merge[难]

    1089 Insert or Merge (25 分) According to Wikipedia: Insertion sort iterates, consuming one input ele ...

  3. SCADA 必备函数之 :关于消息的函数

    Message Functions BroadcastSystemMessage//是将一条系统消息广播给系统中所有的顶级窗口. BroadcastSystemMessageEx//将消息发送到指定的 ...

  4. 235. Lowest Common Ancestor of a Binary Search Tree(LCA最低公共祖先)

      Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the ...

  5. hdu5716

    地址: 题目: 带可选字符的多字符串匹配 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  6. ISO8583

    最开始时,金融系统只有IBM这些大的公司来提供设备,象各种主机与终端等.在各个计算机设备之间,需要交换数据.我们知道数据是通过网络来传送的,而在网络上传送的数据都是基于0或1这样的二进制数据,如果没有 ...

  7. android - Session 'app': Error Installing APK

    File->Settings->Build,Execuion,Deployment->Instant Run 然后把Enable Instant Run to...那一项的勾去掉就好 ...

  8. mongodb入门很简单(1)

    mongodb简介: 如前边介绍的两个键-值数据库: memcached和redis属于(key/value)数据库: 而mongodb是文档数据库:存储的是文档(Bson->json的二进制) ...

  9. You only look once

    计算MAP https://www.zhihu.com/question/53405779 http://tarangshah.com/blog/2018-01-27/what-is-map-unde ...

  10. 解题报告:codeforce 7C Line

    codeforce 7C C. Line time limit per test1 second memory limit per test256 megabytes A line on the pl ...