123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- <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>
|