加载时需要删除,删除完这一条数据需要再补一条

app页面需要删除的情况,页面有5条数据,删除一条数据,需要重新将下一页的数据补到当前页面:

//===================自行补充加载组件哦~
div class="template-box" v-for="(item,index) in list" :key="index">
          <div @touchstart="touchin(index)" @touchend="touchend">{{item.id}}</div>
          <div v-if="index === isDelIndex" @click="delFn(index)">删除{{list.length}}</div>
        </div>

data() {
    return {
      list:[],
      num:0,
      isDelIndex:'',
      pageSize:5
    };
  },
  mounted(){
    this.getData(this.num)

  },
methods: {
    getData(num,type){
      if(type==='del'){
        this.pageSize = 1;
      }
      for(let i = num;i<num+this.pageSize;i++){
        const obj= {
          id:i
        }
        this.list.push(obj)
      }
      this.$refs.loadMore.noMoreData();
      this.$refs.loadMore.finishLoad();
    },
    // 加载更多
    onLoadMore() {
      // 需不需要加???
      if(this.pageSize === 1){
        this.pageSize = 5;
        // this.num +=1;
      }else {
        this.num +=5;
      }
      
      this.getData(this.num)
      
    },
    delFn(index){
      this.list.splice(index,1)
      // this.num = this.num +this.pageSize ; 
      this.num = this.list.length; 

      this.getData(this.num,'del')
    },
    
    // 下拉刷新
    onRefresh() {
      
    },
    touchin(index){ //  长按删除按下事件,按住后等待指定事件触发
        // if(!this.item.del && this.item.source !== 'diff'){
        
      this.Loop = setTimeout( ()=> {
          this.Loop = 0;
          this.isDelIndex = index;
      }, 1000);
    },
    // 长按抬起判断有没有在这个时间内触发,没有的话清除这个定时器
    touchend(){
        clearTimeout(this.Loop);
        if(this.Loop !==0){
            console.log('点击事件')
        }
        return false
    },
    
  },
  <style lang="stylus" scoped>
.msg {
  -webkit-appearance: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  padding-bottom: 128px;
  min-height: 100vh;
  overflow: auto;
  
  .load-more-demo{
    height: 100vh;
  }
  .template-box{
    height: 100%;
    position: relative;
    display: flex;
    div{
      height: 250px;
    }
  }
  .message-none-list{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img{
        width:244px;
        height:160px;
        background: #ddd;
    }
    div{
        font-size: 28px;
        margin-top:20px;
    }
}
  
}

</style>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值