加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    vue-scroll

    Usage

    Use:

    <template>
      <div>
        <my-scroll ref="myScroll" :on-refresh="onRefresh" :on-pull="onPull" :get-scroll-top="getTop" :scroll-state="scrollState">
    					<div slot="scrollList">
                <!-- 列表 -->
    					</div>
    		</my-scroll>
      </div>
    </template>
    <script>
    
    import myScroll from "vue-scroll.vue";
    
    new Vue({
      el: '#app',
      data(){
        return{
          scrollState: true, //是否可以滑动
          indexScrollTop:0,
          listdata:[]
        }
      },
      components: {
        myScroll
      },
      methods:{
            onRefresh(mun) { // 刷新
                this.listParams.p = 1;
                this.$axios
                    .get(apiUrl.noticeList, {
                        params: this.listParams,
                        isLoading: false
                    })
                    .then(res => {
                        if (res.code == 10000) {
                            this.listParams.p++;
                            this.listdata = res.data;
                            this.$refs.myScroll.setState(3);
                        } else {
                            this.$refs.myScroll.setState(3);
                        }
                    });
            },
            onPull(mun) { //加载
                this.$axios
                    .get(apiUrl.noticeList, {
                        params: this.listParams,
                        isLoading: false
                    })
                    .then(res => {
                        if (res.code == 10000 && res.data.length > 0) {
                            this.listParams.p++;
                            res.data.map((v, k) => {
                                this.listdata.push(v);
                            });
                            this.$refs.myScroll.setState(5);
                        } else {
                            this.$refs.myScroll.setState(7);
                        }
                    });
            },
            getTop(y) {//滚动条位置
                this.indexScrollTop = y;
            },
      },
    });
    </script>

    Options

    Props

    Props Type Default Description
    page Object auto counter:当前页 pageStart:开始页数 pageEnd:结束页数 total:总页数
    onRefresh Function true 刷新回调
    onPull Function true 加载回调
    getScrollTop Function auto 获取滚动条位置
    scrollState Boolean true 获取滚动条位置

    Function

    Name Type Description
    setState Number setState(状态) 刷新中:1 松开刷新:2 刷新完成:3加载中:4 加载完成:5 下拉刷新:6 没有更多:7
    setScrollTop Number setScrollTop(滚动条位置)

    Screenshot

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/FZliweiliang/vue-scroll

    发行版本

    当前项目没有发行版本

    贡献者 2

    开发语言

    • JavaScript 100.0 %