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>