You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.9 KiB
79 lines
1.9 KiB
<template>
|
|
<view class="u-page">
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">基本案列</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__loading-item">
|
|
<u-loading-icon></u-loading-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">半圆loading</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__loading-item">
|
|
<u-loading-icon mode="semicircle"></u-loading-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">圆形loading</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__loading-item">
|
|
<u-loading-icon mode="circle"></u-loading-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">自定义动画</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__loading-item">
|
|
<u-loading-icon mode="circle" timingFunction="linear"></u-loading-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">自定义颜色</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__loading-item">
|
|
<u-loading-icon color="#19be6b"></u-loading-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">自定义文字</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__loading-item">
|
|
<u-loading-icon
|
|
:vertical="true"
|
|
text="加载中"
|
|
></u-loading-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-page {
|
|
&__loading-item {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.u-demo-block__content {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|