账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    (急-悬赏解决)vue+mui 上拉刷新和下拉加载无效
    15
    0

    第一次打开的时候是没有问题id,第二次(切换路由到其他页面,再回来就没用了);
    在生命周期方法created,updated mounted中都试过了,还是无效,啊 气疯了!求帮忙解决啊!!!

    <template>
        <div>
            <div class="mui-content">
                <!--下拉刷新容器-->
                <div id="lists" class="mui-content mui-scroll-wrapper" style="margin-bottom: 4rem;">
                    <div class="mui-scroll">
                        <!--数据列表-->
                        <ul class="mui-table-view mui-table-view-chevron">
                            <li class="mui-table-view-cell" v-for="(topic,index) of topics"><a class="mui-navigate-right">Item {{index}}</a></li>
                        </ul>
                    </div>
                </div>
            <nav-components></nav-components>
            </div>
        </div>
    </template>
    <script scoped>
    
        import navComponents from './nav.vue'
    
        export default {
            components: {navComponents},
            name: "index",
            data() {
                return {
                    topics: [],
                }
            },
            methods: {
                pulldownRefresh: function () {
                    alert();
                },
                pullupRefresh: function () {
                    var count = 0;
                    var that = this;
                    setTimeout(function() {
                        that.topics.push({
                            "id": 14,
                            "content": "xxxxx。",
                            "clicl_number": 0,
                            "support_number": 0,
                            "create_time": "2018年07月23日 17:02:04",
                            "user": {
                                "nickname": "测试账户002",
                                "face_url": "http://thinkpjax.cn/xxxxxxx.jpeg"
                            }
                        });
                    }, 1500);
                }
            },
            mounted: function () {
                var that = this;
                mui("#lists").scroll({
                    deceleration: 0.0006,
                    scrollY: true, //是否竖向滚动
                    bounce: true,    ///是否启用回弹
                });
                
            },
            created(){
                mui.init({
                    pullRefresh: {
                        container: '#lists',
                        up: {//上拉加载
                            auto:true,//可选,默认false.自动上拉加载一次
                            contentrefresh: '正在加载...',
                            contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
                            callback: this.pullupRefresh
                        }
                    }
                });
            },
        }
    </script>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 火锅大帝 普通会员 1楼

      在Vue.js和MUI框架中,上拉刷新和下拉加载都是依赖于后端数据的更新。如果后端数据没有更新,那么这两个功能就会无法正常工作。

      以下是一些可能导致上拉刷新和下拉加载无效的原因:

      1. 后端数据没有更新:请确保后端API返回的数据已经更新。这可能是因为你使用了异步请求或者在异步请求完成后进行了更新。如果后端数据没有更新,那么你可能会看到上拉刷新和下拉加载无效。

      2. 数据加载策略:如果你使用了MUI的加载策略,那么这个策略可能不是你的问题。MUI的加载策略是根据你提供的数据来决定加载多少数据的。如果后端数据没有更新,那么MUI可能会认为你的数据加载策略没有改变,因此可能会忽略你的请求。

      3. 服务器错误:如果你的服务器在数据请求或者数据处理过程中发生错误,那么可能会导致上拉刷新和下拉加载无效。

      4. UI错误:如果你的UI设计有问题,那么可能也会导致上拉刷新和下拉加载无效。例如,你的列表可能没有正确地滑动或者点击效果,或者你的搜索框可能没有正确地响应用户的输入。

      解决这些问题需要你检查你的代码和数据,确保它们都已经更新并且正确地处理了后端数据。同时,你还需要检查你的UI设计,确保它们正确地响应用户的输入。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部