美文网首页让前端飞
本地点击更多按钮-加载数据

本地点击更多按钮-加载数据

作者: 小北酱丶 | 来源:发表于2019-04-19 16:42 被阅读0次

    HTML

    <div class="more" @click="add" v-if="flg">更多+</div>
    

    JS

    //初始化数据
    data:{
            counter:1,//计数器
            self:0,//截取的开始位置
            num:9,//截取的结束位置
            flg:true,//更多是否显示
    }
    //初始化调用
    created: function () {
          this.showPicData = this.picData.slice(0,9)
          
    },
    //更多
            add: function () {
                // 点击次数
                this.counter++;
                // 从第9个开始 截取的开始
                this.self = this.self+9;
                // 9的倍数  截取的结束位置
                this.num = 9*this.counter;
                //获取每次的9个数据
                var arr = this.picData.slice(this.self,this.num)
                //更多按钮的显示隐藏
                if(arr.length != 9){
                    this.flg = false
                }
                //把每次拿到的数据添加进去
                this.showPicData = this.showPicData.concat(arr)
                
            },
            
    

    相关文章

      网友评论

        本文标题:本地点击更多按钮-加载数据

        本文链接:https://www.haomeiwen.com/subject/krfcgqtx.html