ilijiayin
ilijiayin
  • 发布:2019-06-10 17:04
  • 更新:2020-05-25 18:09
  • 阅读:2354

【报Bug】官方提供的新闻/资讯App模板,多次下拉刷新之后,上拉加载更多失效

分类:uni-app

官方提供的新闻/资讯App模板,多次下拉刷新之后,上拉加载更多失效,就是loadMore事件未触发。

HBuilderX版本:2.0.0.20190604-alpha

<template>  
    <div>  
        <uni-tabs @change="changeTab" :index="tabIndex">  
            <uni-tab-bar>  
                <div class="tab-bar-item" v-for="(tabBar, index) in tabBars" :key="index" :ref="tabBar.id + index">  
                    <text class="tab-bar-title" :class="[tabIndex === index ? 'active' : '']">{{tabBar.name}}</text>  
                </div>  
            </uni-tab-bar>  
            <uni-tab-content>  
                <list class="list" v-for="(tabItem, tabIndex) in newsList" :key="tabIndex" @loadmore="loadMore(tabIndex)"  
                 loadmoreoffset="10">  
                    <refresh class="refresh" @refresh="onRefresh" @pullingdown="onPullingDown" :display="refreshing ? 'show' : 'hide'">  
                        <text class="refresh-text">{{refreshText}}</text>  
                    </refresh>  
                    <cell v-for="(newsItem, newsIndex) in tabItem.data" :key="newsIndex">  
                        <uni-media-list :data="newsItem" @close="dislike(tabIndex, newsIndex)" @click="goDetail(newsItem)"></uni-media-list>  
                    </cell>  
                    <cell class="loadmore">  
                        <text class="loadmore-text">{{tabItem.loadingText}}</text>  
                    </cell>  
                </list>  
            </uni-tab-content>  
        </uni-tabs>  
    </div>  
</template>  

<script>  
    import uniTabContent from '@/components/uni-tab-content/uni-tab-content.nvue';  
    import uniTabBar from '@/components/uni-tab-bar/uni-tab-bar.nvue';  
    import uniTabs from '@/components/uni-tabs/uni-tabs.nvue';  
    import uniMediaList from '@/components/uni-media-list/uni-media-list.nvue';  

    import {  
        friendlyDate  
    } from '@/common/util.js';  

    const dom = weex.requireModule('dom');  

    export default {  
        data() {  
            return {  
                refreshing: false,  
                refreshText: '下拉可以刷新',  
                newsList: [],  
                tabIndex: 0,  
                tabBars: [{  
                    name: '最新',  
                    id: 0  
                }, {  
                    name: '大公司',  
                    id: 23  
                }, {  
                    name: '内容',  
                    id: 223  
                }, {  
                    name: '消费',  
                    id: 221  
                }, {  
                    name: '娱乐',  
                    id: 225  
                }, {  
                    name: '区块链',  
                    id: 208  
                }, ]  
            }  
        },  
        components: {  
            uniTabContent,  
            uniTabBar,  
            uniTabs,  
            uniMediaList  
        },  
        created() {  
            // 初始化列表信息  
            this.tabBars.forEach((tabBar) => {  
                this.newsList.push({  
                    data: [],  
                    requestParams: {  
                        columnId: tabBar.id,  
                        minId: 0,  
                        pageSize: 10,  
                        column: 'id,post_id,title,author_name,cover,published_at,comments_count'  
                    },  
                    loadingText: '加载中...'  
                });  
            });  
            this.getList();  
        },  
        methods: {  
            getList(action = 1) {  
                let activeTab = this.newsList[this.tabIndex];  
                activeTab.requestParams.time = new Date().getTime() + '';  
                if (action === 1) {  
                    activeTab.requestParams.minId = 0;  
                }  
                uni.request({  
                    url: 'https://unidemo.dcloud.net.cn/api/news',  
                    data: activeTab.requestParams,  
                    success: (result) => {  
                        if (result.statusCode == 200) {  
                            const data = result.data.map((news) => {  
                                return {  
                                    id: news.id,  
                                    article_type: 1,  
                                    datetime: friendlyDate(new Date(news.published_at.replace(/\-/g, '/')).getTime()),  
                                    title: news.title,  
                                    image_url: news.cover,  
                                    source: news.author_name,  
                                    comment_count: news.comments_count,  
                                    post_id: news.post_id  
                                };  
                            });  
                            if (action === 1) {  
                                activeTab.data = data;  
                                this.refreshing = false;  
                            } else {  
                                data.forEach((news) => {  
                                    activeTab.data.push(news);  
                                });  
                            }  
                            activeTab.requestParams.minId = data[data.length - 1].id;  
                        }  
                    }  
                });  
            },  
            goDetail(detail) {  
                uni.navigateTo({  
                    url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))  
                });  
            },  
            dislike(tabIndex, newsIndex) {  
                uni.showModal({  
                    content: '不感兴趣?',  
                    success: (res) => {  
                        if (res.confirm) {  
                            this.newsList[tabIndex].data.splice(newsIndex, 1);  
                        }  
                    }  
                })  
            },  
            loadMore() {  
                this.getList(2);  
            },  
            async changeTab(event) {  
                this.tabIndex = event.index;  
                const activeNode = this.$refs[this.tabBars[event.index].id + event.index][0];  
                let nodeSize = await this.getNodeSize(activeNode);  
                if (nodeSize.left + nodeSize.width > 750) {  
                    let index = event.index - 4;  
                    let targetNode = this.$refs[this.tabBars[index].id + index][0];  
                    dom.scrollToElement(targetNode, {});  
                } else if (nodeSize.left < 0) {  
                    dom.scrollToElement(activeNode, {});  
                }  
                // 首次切换后加载数据  
                const activeTab = this.newsList[this.tabIndex];  
                if (activeTab.data.length === 0) {  
                    this.getList();  
                }  
            },  
            getNodeSize(node) {  
                return new Promise((resolve, reject) => {  
                    dom.getComponentRect(node, (result) => {  
                        resolve(result.size);  
                    });  
                });  
            },  
            onRefresh(event) {  
                this.refreshText = '正在刷新...';  
                this.refreshing = true;  
                this.getList();  
            },  
            onPullingDown(event) {  
                if (this.refreshing) {  
                    return;  
                }  
                if (Math.abs(event.pullingDistance) > Math.abs(event.viewHeight)) {  
                    this.refreshText = "释放立即刷新";  
                } else {  
                    this.refreshText = "下拉可以刷新";  
                }  
            }  
        }  
    }  
</script>  

<style>  
    .tab-bar-item {  
        width: 150px;  
        height: 100px;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .tab-bar-title {  
        height: 100px;  
        line-height: 100px;  
        font-size: 30px;  
        color: #555;  
    }  

    .active {  
        color: #007AFF;  
    }  

    .loadmore {  
        height: 70px;  
        width: 750px;  
        flex-direction: column;  
        justify-content: center;  
    }  

    .loadmore-text {  
        font-size: 30px;  
        text-align: center;  
        color: #999999;  
    }  

    .refresh {  
        width: 750px;  
        height: 70px;  
        flex-direction: row;  
        align-items: center;  
        justify-content: center;  
    }  

    .refresh-text {  
        text-align: center;  
        font-size: 28px;  
        color: #999999;  
    }  
</style>  
2019-06-10 17:04 负责人:无 分享
已邀请:
ilijiayin

ilijiayin (作者)

有大佬遇到这个问题吗?

3***@qq.com

3***@qq.com - 软件外包服务

楼主,请问这个问题,您解决了吗?

程咬金3斧头

程咬金3斧头

上拉加载,在锤子手机浏览器里直接失效,已经放弃兼容了

  • 3***@qq.com

    那有没有其他办法加载刷新呢

    2019-06-24 12:25

  • 程咬金3斧头

    回复 3***@qq.com: 没有,反正我没解决掉。而且列表才100条数据在锤子手机就卡成翔了,准备换原生,但是也有坑没解决。可能是有些手机问题

    2019-06-24 17:05

1***@163.com

1***@163.com

太坑了

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

已重构新闻模板,支持编译到所有平台,优化卡顿等问题

GitHub: https://github.com/dcloudio/uni-template-news

  • 1***@163.com

    你好,请问http请求模块,get方法请求,只支持queryString,不支持qs,导致没办法序列化对象中的对象,这个咋整啊

    2019-08-27 11:39

  • xiaoliao998

    这个还是不行啊,还是有这个问题啊,这个坑太大了,太坑了大哥,

    2019-11-26 23:52

x***@163.com

x***@163.com - 90后it男

请问大佬有没有解决方案

d***@launchtec.cn

d***@launchtec.cn

更新最新版本,多次下拉刷新后,上拉加载一直是加载中。 问题并没有解决

  • 零零2

    亲测重置loadmore可行,就是不知道对数据有没有影响

    2020-05-09 12:54

  • d***@launchtec.cn

    回复 零零2: 怎么重置loadmore

    2020-05-11 11:26

5***@qq.com

5***@qq.com

为什么我的@pullingdown触发几次就不触发了

该问题目前已经被锁定, 无法添加新回复