热门标签
热门文章
- 1数字人系列三：Motionverse 插件或者项目打web包
- 2微信小程序分享、转发朋友、分享朋友圈使用整理_朋友圈发信息程序代码
- 3【Yolov8标注数据集】_yolov8数据集标注
- 4Vue2走马灯（Carousel）_vue 走马灯
- 5Win11家庭版，鸿蒙DevEco 模拟器启动失败，成功解决了_鸿蒙app 模拟器启动
- 6【To .NET】C#数据模型，从Entity Framework Core到LINQ_entity core linq
- 7java判断那个时间更晚_如何用Java判断日期是早于还是晚于另一个日期
- 8hidl 原理分析_Android 系统开发（2）--Android Treble详细分析
- 9vue2.0 -- 打包后打开为空白页：：：：_vue2.0打包后页面空白
- 10Maven简单入门
当前位置: article > 正文
uni-app上拉加载更多方法_uni-load-more--text
作者：我家自动化 | 2024-03-12 02:17:57
赞
踩
uni-load-more--text
页面：
- <view>
- <uni-load-more :status="status" :content-text="contentText" color="#007aff" />
- </view>
自定义组件：
在 components 目录下（和 page 目录同级）新建一个 uni-load-more 文件夹， 然后创建一个文件 uni-load-more.vue uni-load-more.vue 完整文件如下：
- <template>
- <view class="uni-load-more">
- <view v-show="status === 'loading' && showIcon" class="uni-load-more__img">
- <view class="load1">
- <view :style="{background:color}" />
- <view :style="{background:color}" />
- <view :style="{background:color}" />
- <view :style="{background:color}" />
- </view>
- <view class="load2">
- <view :style="{background:color}" />
- <view :style="{background:color}" />
- <view :style="{background:color}" />
- <view :style="{background:color}" />
- </view>
- <view class="load3">
- <view :style="{background:color}" />
- <view :style="{background:color}" />
- <view :style="{background:color}" />
- <view :style="{background:color}" />
- </view>
- </view>
- <text :style="{color:color}" class="uni-load-more__text">{{ status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore) }}</text>
- </view>
- </template>
-
- <script>
- export default {
- name: 'UniLoadMore',
- props: {
- status: {
- // 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
- type: String,
- default: 'more'
- },
- showIcon: {
- type: Boolean,
- default: true
- },
- color: {
- type: String,
- default: '#777777'
- },
- contentText: {
- type: Object,
- default () {
- return {
- contentdown: '上拉显示更多',
- contentrefresh: '正在加载...',
- contentnomore: '没有更多数据了'
- }
- }
- }
- },
- data() {
- return {}
- }
- }
- </script>
-
- <style>
- @charset "UTF-8";
-
- .uni-load-more {
- display: flex;
- flex-direction: row;
- height: 80upx;
- align-items: center;
- justify-content: center
- }
-
- .uni-load-more__text {
- font-size: 28upx;
- color: #999
- }
-
- .uni-load-more__img {
- height: 24px;
- width: 24px;
- margin-right: 10px
- }
-
- .uni-load-more__img>view {
- position: absolute
- }
-
- .uni-load-more__img>view view {
- width: 6px;
- height: 2px;
- border-top-left-radius: 1px;
- border-bottom-left-radius: 1px;
- background: #999;
- position: absolute;
- opacity: .2;
- transform-origin: 50%;
- animation: load 1.56s ease infinite
- }
-
- .uni-load-more__img>view view:nth-child(1) {
- transform: rotate(90deg);
- top: 2px;
- left: 9px
- }
-
- .uni-load-more__img>view view:nth-child(2) {
- transform: rotate(180deg);
- top: 11px;
- right: 0
- }
-
- .uni-load-more__img>view view:nth-child(3) {
- transform: rotate(270deg);
- bottom: 2px;
- left: 9px
- }
-
- .uni-load-more__img>view view:nth-child(4) {
- top: 11px;
- left: 0
- }
-
- .load1,
- .load2,
- .load3 {
- height: 24px;
- width: 24px
- }
-
- .load2 {
- transform: rotate(30deg)
- }
-
- .load3 {
- transform: rotate(60deg)
- }
-
- .load1 view:nth-child(1) {
- animation-delay: 0s
- }
-
- .load2 view:nth-child(1) {
- animation-delay: .13s
- }
-
- .load3 view:nth-child(1) {
- animation-delay: .26s
- }
-
- .load1 view:nth-child(2) {
- animation-delay: .39s
- }
-
- .load2 view:nth-child(2) {
- animation-delay: .52s
- }
-
- .load3 view:nth-child(2) {
- animation-delay: .65s
- }
-
- .load1 view:nth-child(3) {
- animation-delay: .78s
- }
-
- .load2 view:nth-child(3) {
- animation-delay: .91s
- }
-
- .load3 view:nth-child(3) {
- animation-delay: 1.04s
- }
-
- .load1 view:nth-child(4) {
- animation-delay: 1.17s
- }
-
- .load2 view:nth-child(4) {
- animation-delay: 1.3s
- }
-
- .load3 view:nth-child(4) {
- animation-delay: 1.43s
- }
-
- @-webkit-keyframes load {
- 0% {
- opacity: 1
- }
-
- 100% {
- opacity: .2
- }
- }
- </style>
导入组件并使用：
- import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
-
- export default {
- components: {
- uniLoadMore
- },
- data() {
- return {
- page:1,
- status: 'more',
- contentText: {
- contentdown: '查看更多',
- contentrefresh: '加载中',
- contentnomore: '没有更多'
- },
- }
- },
- onLoad() {
- this.getmsg()
-
- setTimeout(function() {
- console.log('start pulldown');
- }, 1000);
- uni.startPullDownRefresh();
- },
- // 上拉加载
- onReachBottom() {
- let _self = this
- this.status = 'loading'
- uni.showNavigationBarLoading()
-
- console.log('reach');
- setTimeout(function() {
- _self.page++;
- _self.status = 'more'
- _self.getmsg();
- uni.hideNavigationBarLoading()
- }, 2000);
- },
- methods: {
- // 获取初始数据
- getmsg: function() {
- let _self = this;
- uni.request({
- url: _self._apiurl + "app/my/getpkmain",
- method: 'POST',
- header: {
- 'content-type': 'application/x-www-form-urlencoded'
- },
- data: {
- page: _self.page,
- limit: 10
- },
- success: (res) => {
- console.log(res);
- if(_self.page!=1){
- _self.datas =_self.datas.concat(res.data.data)
- }else{
- _self.datas =res.data.data
- }
-
- _self.count = res.data.main[0].count
- _self.total_money = res.data.main[0].total_money
- }
- })
- }
- }
- }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/221392
推荐阅读
相关标签
