微信小程序progress组件使用详解,微信小程序

2019-06-29 23:23 来源:未知

重大品质:

 微信小程序 内容组件

正文为大家大饱眼福了微信小程序progress组件的行使办法,供我们参谋,具体内容如下

韦德娱乐1946网页版 1

有关小说:

效果图

效果图:

微信小程序 wxapp内容组件 icon

韦德娱乐1946网页版 2

韦德娱乐1946网页版 3

微信小程序 wxapp内容组件 text

WXML

ml:

微信小程序 wxapp内容组件progress

<view class="tui-content">
 <view class="tui-menu-list">
  <text>show-info在进度条右侧显示百分比</text>
  <progress percent="50" show-info />
 </view>
 <view class="tui-menu-list">
  <text>stroke-width进度条线的宽度,单位px</text>
  <progress percent="50" stroke-width="12" show-info/>
 </view>
 <view class="tui-menu-list">
  <text>color进度条颜色</text>
  <progress percent="50" color="red" show-info/>
 </view>
 <view class="tui-menu-list">
  <text>active进度条从左往右的动画</text>
  <progress percent="50" active show-info/>
 </view>
 <view class="tui-menu-list">
  <text>backgroundColor未选择的进度条的颜色</text>
  <progress percent="50" backgroundColor="blue" active show-info/>
 </view>
 <view class="tui-menu-list">
  <text>动态设置进度条进度</text>
  <progress percent="{{index}}" show-info/>
 </view>
 <view class="tui-tabbar-content">
  <view class="tui-tabbar-group">
   <text data-id="10" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 10 ? 'tui-active' : ''}}">10%</text>
   <text data-id="30" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 30 ? 'tui-active' : ''}}">30%</text>
   <text data-id="50" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 50 ? 'tui-active' : ''}}">50%</text>
   <text data-id="70" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 70 ? 'tui-active' : ''}}">70%</text>
   <text data-id="90" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 90 ? 'tui-active' : ''}}">90%</text>
  </view>
 </view>
</view>
<View >
  <!--百分比是30,并在进度条右侧显示百分比-->
  <Text class="text-style">百分比是30,并在进度条右侧显示百分比</Text>
  <progress percent="30" show-info />
  <!--百分比是40,进度条线的宽度12px-->
  <Text class="text-style">百分比是40,进度条线的宽度12px</Text>
  <progress percent="40" stroke-width="12" />
  <!--百分比是60,进度条颜色:pink-->
  <Text class="text-style">百分比是60,进度条颜色:pink</Text>
  <progress percent="60" color="pink" />
  <!--百分比是80,进度条从左往右的动画-->
  <Text class="text-style">百分比是80,进度条从左往右的动画</Text>
  <progress percent="80" show-info active />
</View>

微信小程序内容组件 进度条:progress

JS

ss:

进度条

Page({
 data: {
  index: 10
 },
 changeTabbar(e){
  this.setData({ index: e.currentTarget.dataset.id})
 }
})
.text-style{
  font-size: 13px;
}
属性名 类型 默认值 说明
percent Float 百分比0~100
showInfo Boolean false 在进度条右侧显示百分比
strokeWidth Number 6 进度条线的宽度,单位px
color Color #09BB07 进度条颜色
active Boolean false 进度条从左往右的动画

progress属性

感激阅读,希望能援助到大家,多谢我们对本站的支持!

示例:

percent:早先化所占比例
show-info:进程条左边是不是出示进度条百分比
stroke-width:进程条宽度,单位px,默以为6
color:进程条颜色
activeColor:已选取的进程条的水彩
backgroundColor:未选取的进程条的水彩
active:进度条从左往右的卡通片
active-mode:backwards: 动画从头播;forwards:动画从上次截止点接着播

你大概感兴趣的作品:

  • 微信小程序选取progress组件达成展现速度功效【附源码下载】
  • 微信小程序 wxapp内容组件 progress详细介绍
  • 微信小程序(十三)progress组件详细介绍
  • 微信小程序progress组件使用详解
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

DEMO下载.rar)

多谢阅读,希望能支援到大家,谢谢大家对本站的支撑!

以上就是本文的全体内容,希望对我们的求学抱有辅助,也期望大家多多协助脚本之家。

韦德娱乐1946网页版,您或者感兴趣的作品:

  • 微信小程序行使progress组件达成展现速度作用【附源码下载】
  • 微信小程序 progress组件详解及实例代码
  • 微信小程序(十三)progress组件详细介绍
  • 微信小程序progress组件使用详解

你大概感兴趣的篇章:

  • 微信小程序选择progress组件完成彰显速度成效【附源码下载】
  • 微信小程序 wxapp内容组件 progress详细介绍
  • 微信小程序 progress组件详解及实例代码
  • 微信小程序(十三)progress组件详细介绍
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:微信小程序progress组件使用详解,微信小程序