nutui二次封装上拉加载下拉刷新组件

Posted 2021-02-18 fqh123

<!-- nutUI -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.1.8/dist/nutui.min.css">
<!-- nutUI -->
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.1.8/dist/nutui.min.js"></script>

封装组件：

scroller.vue：

<template>
    <div class="my_scroller_box" :class="className">
        <nut-scroller
            class="inner_scroller_class"
            :is-un-more="isUnMore" 
            :is-loading="isLoading"
            :type="‘vertical‘"
            :stretch="50"
            :propsTime="500"
            :pulldownTxt="pulldownTxt"
            :loadMoreTxt="loadMoreTxt"
            :unloadMoreTxt="unloadMoreTxt"
            @loadMore="loadMoreFun"
            @pulldown="pulldownFun"> 
            <div slot="list" >
                <div class="content_wrap">
                    <slot name="content"></slot>
                </div>
            </div>
        </nut-scroller>
    </div>
</template>

<script>
export default {
    props:{
        className: {
        //样式名称
            type: String,
            default: ‘‘
        },
        pulldownTxt:{
            type:String,
            default:‘下拉刷新‘
        },
        loadMoreTxt:{
            type:String,
            default:‘上拉加载‘
        },
        unloadMoreTxt:{
            type:String,
            default:‘没有更多了‘
        },
        isUnMore:{
        //没有更多？
        //若没有更多，底部会出现 没有更多字样
            type:Boolean,
            default:false
        },
        isLoading:{
        //正在加载？
        //若正在加载的状态：上拉和下拉会无效
           type:Boolean,
           default:false 
        }
    },
    data(){
        return{
        }
    },
    methods: {
        pulldownFun(){
        //下拉方法
            this.$emit("pulldownFun");
        },
        loadMoreFun(){
        //上拉
            this.$emit("loadMoreFun");
        }
    },
}
</script>

<style lang="scss" scoped>
.my_scroller_box{
    flex-shrink: 0;
    .inner_scroller_class{
        border:1px solid yellow;
        width:100%;
    }
}
</style>

使用：

<template>
    <div class="tiwen_box">
        <scroller 
            :class="‘cus_scroller‘"
            :isUnMore="isUnMore"
            :isLoading="isLoading"
            @pulldownFun="pulldownFun"
            @loadMoreFun="loadMoreFun">
                <div slot="content">
                    内容
                </div>
            </scroller>
    </div>
</template>

<script>
import scroller from "@/components/scroller";
export default {
    components:{
        scroller,
    },
    data(){
        return{
            isUnMore:false,//没有更多?
            isLoading:false,//正在加载?
            
        }
    },
    methods: {
        pulldownFun(){
        //上拉加载
            console.log("下拉")
            var self=this;
            this.isLoading=true;//正在加载
            setTimeout(()=>{
                self.isLoading=false;
            },3000)
        },
        loadMoreFun(){
        //下拉刷新
            console.log("上拉")
            this.isLoading=true;//正在加载
            setTimeout(()=>{
                self.isLoading=false;
            },3000)
        }
    },
}
</script>

<style lang="scss" scoped>
.tiwen_box{
    border:1px solid green;
    height:100vh;
    box-sizing: border-box;
}
.cus_scroller{
    height:100vh;
    border:1px solid red;
}
</style>

 

 

 

 

 

。