微信小程序 progress 进度条 内部圆角及内部条渐变色

Posted 2023-04-27

参考技术A 微信小程序progress进度条内部圆角及渐变色

设置progress CSS:

效果：

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

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

先来看看效果图：

   

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>