Rumah > applet WeChat > Pembangunan program mini > 解读和分析微信小程序组件:六、progress进度条

解读和分析微信小程序组件:六、progress进度条

巴扎黑
Lepaskan: 2017-03-19 18:34:51
asal
2411 orang telah melayarinya

progress进度条组件说明:

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

下面是WXML代码:

[XML] 纯文本查看 复制代码

1

2

3

4

5

<!--index.wxml-->

<view class="content">

    <text class="con-text">问:老司机,啥时候开车?</text>

    <progress class="con-pro" percent="97" show-info/>

</view>

Salin selepas log masuk

下面是JS代码:

[JavaScript] 纯文本查看 复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Page({

  data:{

  },

  onLoad:function(options){

    // 页面初始化 options为页面跳转所带来的参数

  },

  onReady:function(){

    // 页面渲染完成

  },

  onShow:function(){

    // 页面显示

  },

  onHide:function(){

    // 页面隐藏

  },

  onUnload:function(){

    // 页面关闭

  }

})

Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

下面是WXSS代码:

[CSS] 纯文本查看 复制代码

1

2

3

4

5

6

7

8

9

10

.content{

  padding-top: 20px;

}

.con-text{

  display: block;

  padding-bottom: 20px;

}

.con-pro{

  color: cornflowerblue;

}

Salin selepas log masuk

下面是WXML代码:

[XML] 纯文本查看 复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!--index.wxml-->

<view class="content">

    <text class="con-text">不展示百分比</text>

    <progress class="con-pro" percent="77"/>

    <text class="con-text">展示百分比(百分比字体样式通过class控制)</text>

    <progress class="con-pro" percent="97" show-info/>

    <text class="con-text">改变进度条线的宽度:15px</text>

    <progress class="con-pro" percent="47" stroke-width="15"/>

    <text class="con-text">改变进度条颜色(#):黑色</text>

    <progress class="con-pro" percent="67" color="#000000"/>

    <text class="con-text">改变进度条颜色(已定义):橘色</text>

    <progress class="con-pro" percent="67" color="orange"/>

    <text class="con-text">几个属性叠加</text>

    <progress class="con-pro" percent="87" color="lightgreen" show-info stroke-width="30"/>

</view>

Salin selepas log masuk


下面是JS代码:

[JavaScript] 纯文本查看 复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Page({

  data:{

  },

  onLoad:function(options){

    // 页面初始化 options为页面跳转所带来的参数

  },

  onReady:function(){

    // 页面渲染完成

  },

  onShow:function(){

    // 页面显示

  },

  onHide:function(){

    // 页面隐藏

  },

  onUnload:function(){

    // 页面关闭

  }

})

Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

下面是WXSS代码:

[CSS] 纯文本查看 复制代码

1

2

3

4

5

6

7

8

9

10

11

.content{

  padding-top: 20px;

}

.con-text{

  display: block;

  padding-bottom: 10px;

}

.con-pro{

  padding-bottom: 30px;

  color: cornflowerblue;

}

Salin selepas log masuk
Salin selepas log masuk

下面是WXML代码:

[XML] 纯文本查看 复制代码

1

2

3

4

5

<!--index.wxml-->

<view class="content">

    <text class="con-text">看我开的飞起</text>

    <progress class="con-pro" active percent="87" color="lightgreen" show-info stroke-width="20"/>

</view>

Salin selepas log masuk

下面是JS代码:

[JavaScript] 纯文本查看 复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Page({

  data:{

  },

  onLoad:function(options){

    // 页面初始化 options为页面跳转所带来的参数

  },

  onReady:function(){

    // 页面渲染完成

  },

  onShow:function(){

    // 页面显示

  },

  onHide:function(){

    // 页面隐藏

  },

  onUnload:function(){

    // 页面关闭

  }

})

Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

下面是WXSS代码:

[CSS] 纯文本查看 复制代码

1

2

3

4

5

6

7

8

9

10

11

.content{

  padding-top: 20px;

}

.con-text{

  display: block;

  padding-bottom: 10px;

}

.con-pro{

  padding-bottom: 30px;

  color: cornflowerblue;

}

Salin selepas log masuk
Salin selepas log masuk


progress进度条的主要属性:

属性

类型

默认值

描述

percent float 0 表示0-100百分比
show-info Boolean false 表示在进度条右侧显示百分比,写上属性即为true
color Color #09BB07 表示进度条颜色,可以是#或者已定义颜色属性
stroke-width Number 6 单位:px,表示进度条显示的线条宽度
active Boolean false 表示进度条从左往右的动画,动画到设置的百分比停止,写上属性即为true



Atas ialah kandungan terperinci 解读和分析微信小程序组件:六、progress进度条. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan