用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

基本组件--(进度条、滑动选择器、开关选择器、复选框、)

Rolan 2017-9-16 00:32

1:进度条(progress) 2:滑动选择器(slider) 3:开关选择器(switch)4:开关选择器(radio)单选按钮 5:复选框(Checkbox)

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

先来看看效果图:

    

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

先来看看效果图:

 1:进度条(progress)

  1. <progress percent='25' show-info='true'>progress>
  2. <progress percent='35' stroke-width='12' active='true'>progress>
  3. <progress percent='55' color='green' backgroundColor='red'>progress>

percent:百分比(0-100) 
show-info:是否显示百分比 
进度条的颜色,加载完成的颜色和未完成的颜色都是可以自定义的。 
2:滑动选择器(slider)

  1. <view>
  2. <slider bindchange='sliderChang1' step='5' show-value='true'>slider>
  3. view>

bindchang:完成拖动后触发的事件 
step:间隔 取值必须大于0 ; 
show-value:是否显示当前的value 
3:开关选择器(switch)

  1. <view>Switchview>
  2. <view class="switch_cm">
  3. <text>声音是否开启text>
  4. <switch class='switch_meld' checked='true' bindchange='switchChange'>switch>
  5. view>

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

  1. <view>radioview>
  2. <view>
  3. <radio-group>
  4. <radio class='boy' checked='true'>男radio>
  5. <radio class='girl'>女radio>
  6. radio-group>
  7. view>

和Html中的相同 
5:复选框(Checkbox)

  1. <view>Checkboxview>
  2. <checkbox-group>
  3. <checkbox>选项1checkbox>
  4. <checkbox>选项2checkbox>
  5. checkbox-group>
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 切切歆语 来自: csdn

相关阅读