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.
105 lines
2.6 KiB
105 lines
2.6 KiB
<template> |
|
<view class="container"> |
|
<uni-card is-full :is-shadow="false"> |
|
<text class="uni-h6">加载更多组件用于页面加载更多数据时，页面底部显示内容等场景</text> |
|
</uni-card> |
|
<uni-section title="基本用法" type="line"> |
|
<uni-load-more :status="status" /> |
|
</uni-section> |
|
<uni-section title="修改默认文字" type="line"> |
|
<uni-load-more :status="status" :content-text="contentText" /> |
|
</uni-section> |
|
<uni-section title="改变颜色" type="line"> |
|
<uni-load-more color="#007AFF" :status="status" /> |
|
</uni-section> |
|
<uni-section title="指定加载图标样式 - 按平台自动选择样式" type="line"> |
|
<uni-load-more iconType="auto" :status="status" /> |
|
</uni-section> |
|
<uni-section title="指定加载图标样式 - 环形" type="line"> |
|
<uni-load-more iconType="circle" :status="status" /> |
|
</uni-section> |
|
|
|
<uni-section title="改变组件状态" type="line"> |
|
<radio-group class="uni-list" @change="onChange"> |
|
<view v-for="(item, index) in statusTypes" :key="index" class="uni-list-item"> |
|
<view class="uni-list-item__container"> |
|
<view class="uni-list-item__content"> |
|
<text class="uni-list-item__content-title">{{ item.text }}</text> |
|
</view> |
|
<view class="uni-list-item__extra"> |
|
<radio :value="item.value" :checked="item.checked" /> |
|
</view> |
|
</view> |
|
</view> |
|
</radio-group> |
|
</uni-section> |
|
|
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
components: {}, |
|
data() { |
|
return { |
|
status: 'more', |
|
statusTypes: [{ |
|
value: 'more', |
|
text: '加载前', |
|
checked: true |
|
}, { |
|
value: 'loading', |
|
text: '加载中', |
|
checked: false |
|
}, { |
|
value: 'noMore', |
|
text: '没有更多', |
|
checked: false |
|
}], |
|
contentText: { |
|
contentdown: '查看更多', |
|
contentrefresh: '加载中', |
|
contentnomore: '没有更多' |
|
} |
|
} |
|
}, |
|
methods: { |
|
onChange(e) { |
|
this.status = e.detail.value |
|
}, |
|
clickLoadMore(e) { |
|
uni.showToast({ |
|
icon: 'none', |
|
title: "当前状态：" + e.detail.status |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.uni-list-item { |
|
border-bottom-style: solid; |
|
border-bottom-width: 1px; |
|
border-bottom-color: #eee; |
|
font-size: 14px; |
|
} |
|
|
|
.uni-list-item__container { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
width: 100%; |
|
box-sizing: border-box; |
|
/* #endif */ |
|
padding: 12px 15px; |
|
flex: 1; |
|
position: relative; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.uni-list-item__content-title { |
|
font-size: 14px; |
|
color: #666; |
|
} |
|
</style>
|
|
|