基于uview的瀑布流,然后自己加了个checbox点击。
每次点击,先判断需要删除的id在不在数组里面,如果indexof没有返回值,则push,如果是-1,则splice去除。
<view class="wrap u-m-b-40">
<u-waterfall v-model="posterList" ref="uWaterfall">
<template v-slot:left="{ leftList }">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<view v-show="check_show" style="width: 20px;height:20px;position: absolute;z-index: 2;right: 10px;">
<u-checkbox shape="circle" size="40" active-color="#0055ff" v-model="check1" @change="che1(item)"></u-checkbox>
</view>
<u-lazy-load @click="goDetail(item)" threshold="-450" border-radius="10" :image="item.img" :index="index"></u-lazy-load>
<view class="demo-title f-12 f-black u-p-t-10">{{ item.title }}</view>
<view class="demo-tag wllw-flex wllw-flex-between">
<view class="demo-tag-text f-12 f-c-9">{{ item.share_num }}人分享过</view>
<view class="demo-tag-text"><u-icon name="zhuanfa" :color="$common.icon.colorSix" size="28"></u-icon></view>
</view>
</view>
</template>
<template v-slot:right="{ rightList }">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<view v-show="check_show" style="width: 20px;height:20px;position: absolute;z-index: 2;right: 10px;">
<u-checkbox shape="circle" size="40" active-color="#0055ff" v-model="check2" @change="che2(item)"></u-checkbox>
</view>
<u-lazy-load @click="goDetail(item)" threshold="-450" border-radius="10" :image="item.img" :index="index"></u-lazy-load>
<view class="demo-title f-12 f-black u-p-t-10">{{ item.title }}</view>
<view class="demo-tag wllw-flex wllw-flex-between">
<view class="demo-tag-text f-12 f-c-9">{{ item.share_num }}人分享过</view>
<view class="demo-tag-text"><u-icon name="zhuanfa" :color="$common.icon.colorSix" size="28"></u-icon></view>
</view>
</view>
</template>
</u-waterfall>
</view>
check1: false,
check2: false,
posterList: [],
che1(item) {
console.log(item);
this.check1 = true;
var num = this.ids.indexOf(item.id);
if (num > -1) {
this.ids.splice(num, 1);
} else {
this.ids.push(item.id);
}
console.log(this.ids)
},
che2(item) {
this.check2 = true;
var num = this.ids.indexOf(item.id);
if (num > -1) {
this.ids.splice(num, 1);
} else {
this.ids.push(item.id);
}
console.log(this.ids)
},
del() {
this.check_show = true;
},
cancel() {
this.check_show = false;
this.ids = []
this.check1 = false;
this.check2 = false;
},
add(){
console.log(this.ids)
model.getDel_poster(this,this.ids)
model.getPoster(this, this.poster_params);
}