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