微信小程序组件progress进度条怎么弄

小编给大家分享一下微信小程序组件progress进度条怎么弄,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

在新县等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站设计制作、成都网站设计 网站设计制作定制网站开发,公司网站建设,企业网站建设,高端网站设计,成都全网营销,外贸网站制作,新县网站建设费用合理。

progress进度条组件说明:

进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行。
progress进度条是微信小程序的组件,和HTML5的进度条progress类似。

progress进度条组件示例代码运行效果如下:

微信小程序组件progress进度条怎么弄

下面是WXML代码:



    问:老司机,啥时候开车?
    

下面是JS代码:

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码:

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 20px;
}
.con-pro{
  color: cornflowerblue;
}

微信小程序组件progress进度条怎么弄

下面是WXML代码:



    不展示百分比
    
    展示百分比(百分比字体样式通过class控制)
    
    改变进度条线的宽度:15px
    
    改变进度条颜色(#):黑色
    
    改变进度条颜色(已定义):橘色
    
    几个属性叠加
    

下面是JS代码:

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码:

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

微信小程序组件progress进度条怎么弄

下面是WXML代码:



    看我开的飞起
    

下面是JS代码:

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码:

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-pro{
  padding-bottom: 30px;
  color: cornflowerblue;
}

progress进度条的主要属性:

属性

类型

默认值

描述

percentfloat0表示0-100百分比
show-infoBooleanfalse表示在进度条右侧显示百分比,写上属性即为true
colorColor#09BB07表示进度条颜色,可以是#或者已定义颜色属性
stroke-widthNumber6单位:px,表示进度条显示的线条宽度
activeBooleanfalse表示进度条从左往右的动画,动画到设置的百分比停止,写上属性即为true

看完了这篇文章,相信你对“微信小程序组件progress进度条怎么弄”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


新闻标题:微信小程序组件progress进度条怎么弄
URL分享:http://scyanting.com/article/jcicjs.html