h5页面上拉加载 下拉刷新实现分页效果；

版权声明：未经本人同意不得转载 一切法律责任 后果自负 https://blog.csdn.net/xy19950125/article/details/89492928

使用的还是vux框架里面不再维护的插件 scroller。详情请自己查看https://doc.vux.li/zh-CN/。

<scroller lock-x   v-model="scrollerStatus" :use-pullup='isshow' :pullup-config="pullupDefaultConfig" @on-pullup-loading='loadMore' ref="scrollerBottom" >
      <div>
        <ul>
            <li v-for="(item,i) in dataList" :key="i" ></li>
        </ul>
      </div>
 </scroller>

用v-model绑定   use-pullup开启下拉  pullup-config是需要自己手动配置的对象

import { Scroller } from 'vux'
let pullupDefaultConfig = {
    content: '暂无更多数据',
    pullUpHeight: 60,
    height: 40,
    autoRefresh: false,
    downContent: '释放后加载',
    upContent: '下拉加载更多',
    loadingContent: '加载中...',
    clsPrefix: 'xs-plugin-pullup-'
}
export default {
    components: {
        Scroller
        
    },
    data(){
        return {
            scrollerStatus:{
                 pullupStatus: 'default'
            },
            salt: this.$store.state.salt,
            params: this.$store.state.parameter,
            dataList:[],
            onFetching: false,
            pullupDefaultConfig:pullupDefaultConfig,
            pageNumber:1,
            isshow:true
        }
    },
    methods:{
        loadMore() {
            setTimeout(() => {
                this.pullUpGetData()
            }, 1500)
           
        },
        pullUpGetData (){
            this.pageNumber+=1
            let params = this.params;
            params.apiKey = "配置的apikey";
            params.data = JSON.stringify({
                pageNum:this.pageNumber,
                pageSize:10
            });
            params.sign = MD5(params.apiKey + "" + params.data + this.salt);
            this.http.post(BASE_URL, params).then(data=>{
                if(data.code=='success'){
                    this.dataList = this.dataList.concat(data.data.dataList)
                }
                if (data.data.dataList.length < 10) {
            // 没有就显示底线以及禁用上拉
                    // this.onFetching = true
                    this.scrollerStatus.pullupStatus = 'disabled'
                }else{
                    this.scrollerStatus.pullupStatus = 'default'
                    this.$nextTick(() => {
                        this.$refs.scrollerBottom.reset()
                    })
                }

            }).catch(err=>{
                console.log(err)
            })
        },
        totweetsDetail(exhibitionContentCode){
            this.$router.push('/tweetsDetail?exhibitionContentCode='+exhibitionContentCode)
        },
        getData(){
            let params = this.params;
            params.apiKey = "apikey";
            params.data = JSON.stringify({
                pageNum:this.pageNumber,
                pageSize:10
            });
            params.sign = MD5(params.apiKey + "" + params.data + this.salt);
            this.http.post(BASE_URL, params).then(data=>{
                if(data.code=='success'){
                    if(data.data.dataList.length>0){
                        data.data.dataList.map(item=>{
                            this.dataList.push(item)
                        })
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        }
    },
    created(){
        document.title = "推文列表";
        this.getData()
        this.$nextTick(() => {
            this.$refs.scrollerBottom.reset()
        })

    }
}

需要注意的点是 获取数据后，不能直接赋值 不然会把值给覆盖掉，用push方法 。

上面代码有很多优化的地方 由于时间原因 没有时间修改 自己再去优化吧。