微信小程序weui在线入门教程-WeUi基础组件-progress进度条

电玩女神 2024-02-19 15:49 131阅读 0赞

效果图

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua
微信小程序weui在线入门教程-WeUi基础组件-progress进度条

wxml代码

  1. <view class="page">
  3.   <view class="page__hd">
  5.     <view class="page__title">Progress</view>
  7.     <view class="page__desc">进度条，这里采用小程序原生的progress</view>
  9.   </view>
  11.   <view class="page__bd page__bd_spacing">
  13.     <view class="weui-progress">
  15.       <view class="weui-progress__bar">
  17.         <progress percent="0" stroke-width="3" />
  19.       </view>
  21.       <view class="weui-progress__opr">
  23.         <icon type="cancel" size="22"></icon>
  25.       </view>
  27.     </view>
  29.     <view class="weui-progress">
  31.       <view class="weui-progress__bar">
  33.         <progress percent="50" stroke-width="3" />
  35.       </view>
  37.       <view class="weui-progress__opr">
  39.         <icon type="cancel" size="22"></icon>
  41.       </view>
  43.     </view>
  45.     <view class="weui-progress">
  47.       <view class="weui-progress__bar">
  49.         <progress percent="80" stroke-width="3" />
  51.       </view>
  53.       <view class="weui-progress__opr">
  55.         <icon type="cancel" size="22"></icon>
  57.       </view>
  59.     </view>
  61.     <view class="weui-progress">
  63.       <view class="weui-progress__bar">
  65.         <progress percent="{
  66.    {progress}}" stroke-width="3" />
  68.       </view>
  70.       <view class="weui-progress__opr">
  72.         <icon type="cancel" size="22"></icon>
  74.       </view>
  76.     </view>
  78.     <view class="weui-btn-area">
  80.       <button type="primary" bindtap="upload" disabled="{
  81.    {disabled}}">上传</button>
  83.     </view>
  85.   </view>
  87. </view>

欢迎大家学习我的视频教程：微信小程序-WeUI界面布局设计入门到精通
微信小程序-WeUI界面布局设计入门到精通

发表评论

表情：
评论列表 （有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读