mint-ui中组件Loadmore 的使用上拉加载（及兼容性问题）下拉刷新

最新推荐文章于 2020-09-29 11:04:41 发布

奥皮

最新推荐文章于 2020-09-29 11:04:41 发布

阅读量1.7k

点赞数 1

分类专栏：前端mintUi 文章标签： mintui loadmore 上拉加载下拉刷新兼容性 html

本文链接：https://blog.csdn.net/axIsMyName/article/details/98495214

版权

前端mintUi 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上拉加载以及下拉刷新是内容通过手指移动而触发事件

在mintUi组件中使用Loadmore方法及其简单方法如下

<body>
    <div id="app">
        <div class="">
            <div class="test">
            //这里放组件
                <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
                    ref="loadmore">
             //这里是放的内容
                    <ul>
                        <li v-for="item in list">{{ item }}</li>
                    </ul>
                </mt-loadmore>
                 <div slot="top" class="mint-loadmore-top">
                        <span v-show="topStatus !== 'loading'"
                            :class="{ 'rotate': topStatus === 'drop' }">更新中.....</span>
                        <span v-show="topStatus === 'loading'">Loading...</span>
                    </div>//用插槽来显示下拉刷新的文字 跟等待响应式的文字 可以通过 类名来修改样式
                    <div slot="bottom" class="mint-loadmore-bottom">
                        <span v-show="bottomStatus !== 'loading'"
                            :class="{ 'rotate': bottomStatus === 'drop' }">加载更多数据</span>
                        <span v-show="bottomStatus === 'loading'">Loading...</span>
                    </div>//这是上拉加载插槽
            </div>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            list: [1, 2, 3],
            allLoaded: false,//这个变量默认为false 当上拉加载没有数据是 可以让其变成true 停止上拉加载，
            topStatus: "", // 这个是下拉插槽的数据 当做判断条件使用
            bottomStatus: ""// 这个是上拉插槽的数据 当做判断条件使用
        },
        methods: {
            loadTop() {
                this.$refs.loadmore.onTopLoaded();
                console.log(1)//下拉刷新 这里可以发送异步请求
            },
            loadBottom() { // 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded()
                console.log(2)//上拉加载 这里可以发送异步请求
            }
        }
    })
</script>

如果说你在手ios 或者在chrome中手机调试测试时可能会遇到无限下拉加载或者下拉加载不了的兼容性问题这是你只用在外部添加一个盒子给盒子添加样式overflow：aotu 就可以完美解决这个问题了

//给test 添加以下样式
 <style>
    .test {
        overflow: auto;//解决兼容性问题
        -webkit-overflow-scrolling: touch;//这个是在ios中上拉的更加流畅
    }
</style>

完成上面的代码就可以实现上拉加载下拉刷新了需要上面功能或者添加事件直接在代码中进行修改就可以了

奥皮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
mint-ui中组件Loadmore 的使用上拉加载（及兼容性问题）下拉刷新

上拉加载以及下拉刷新是内容通过手指移动而触发事件在mintUi组件中使用Loadmore方法及其简单方法如下<body> <div id="app"> <div class=""> <div class="test"> //这里放组件 ...
复制链接

扫一扫