bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/componentsB/progress/progress.nvue
+155
View File
@@ -0,0 +1,155 @@
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基础功能</text>
<view class="u-demo-block__content">
<u-line-progress :percentage="percentage1">
</u-line-progress>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">不显示百分比</text>
<view class="u-demo-block__content">
<u-line-progress
:showText="false"
:percentage="percentage2"
>
</u-line-progress>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义高度</text>
<view class="u-demo-block__content">
<u-line-progress
height="8"
:showText="false"
:percentage="percentage3"
>
</u-line-progress>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">自定义颜色</text>
<view class="u-demo-block__content">
<u-line-progress
height="8"
:showText="false"
:percentage="percentage4"
activeColor="#3c9cff"
inactiveColor="#f3f4f6"
>
</u-line-progress>
</view>
</view>
<view
class="u-demo-block"
v-if="!androidNvue"
>
<text class="u-demo-block__title">自定义样式(不支持安卓环境的nvue)</text>
<view class="u-demo-block__content">
<u-line-progress
height="8"
:showText="false"
:percentage="percentage5"
activeColor="#3c9cff"
inactiveColor="#f3f4f6"
>
<text class="u-percentage-slot">{{percentage4}}%</text>
</u-line-progress>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">手动加减</text>
<view class="u-demo-block__content">
<u-line-progress
height="8"
:showText="false"
:percentage="percentage6"
activeColor="#3c9cff"
inactiveColor="#f3f4f6"
>
</u-line-progress>
<view class="button-group">
<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('minus')">
<text class="button-group__circle__text">减少</text>
</view>
<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('plus')">
<text class="button-group__circle__text">增加</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
androidNvue: false,
percentage1: 30,
percentage2: 40,
percentage3: 50,
percentage4: 60,
percentage5: 70,
percentage6: 50,
}
},
onLoad() {
// #ifdef APP-NVUE
this.androidNvue = uni.$u.os() === 'android'
// #endif
uni.$u.sleep(2500).then(() => {
this.percentage1 = 120
})
},
methods: {
computedWidth(type) {
if(type === 'plus') {
this.percentage6 = uni.$u.range(0, 100, this.percentage6 + 10)
} else {
this.percentage6 = uni.$u.range(0, 100, this.percentage6 - 10)
}
}
},
}
</script>
<style lang="scss">
.u-page {}
.u-percentage-slot {
padding: 1px 5px;
background-color: $u-warning;
color: #fff;
border-radius: 100px;
font-size: 10px;
margin-right: -5px;
}
.u-demo-block__content {
flex-direction: column !important;
flex-wrap: nowrap;
align-items: stretch;
}
.button-group {
@include flex;
justify-content: center;
&__circle {
width: 50px;
height: 50px;
background-color: #dbfbdb;
border-radius: 100px;
justify-content: center;
align-items: center;
margin: 30px 30px;
&__text {
color: rgb(25, 190, 107);
font-size: 13px;
}
}
}
</style>