美文网首页
微信小程序------基本组件

微信小程序------基本组件

作者: 切切歆语 | 来源:发表于2019-12-02 23:03 被阅读0次

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

    先来看看效果图:

    image

    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>
    

    相关文章

      网友评论

          本文标题:微信小程序------基本组件

          本文链接:https://www.haomeiwen.com/subject/iocjwctx.html