使用的是vant UI库,一开始因为badge的动态赋值就想了好久哈哈,不过也一步一步做出来了。感兴趣就跟我一起看看吧!
页面布局上面板块是“我的应用”,下面的板块是“所有应用”,点击上面应用的小徽标将其在下面的小徽标改为“+”,并且在上面把他删除掉;点击下面的带有“+”的小徽标的icon时,将其添加到上面并且将“+”的徽标省略。
下面是代码的实现:
页面的基本布局
---我的应用---
<van-grid class="grid" :border="false">
<van-grid-item class="gutter" badge="-" v-for="icon in iconListMy" :key="icon.key" :icon="icon.src" :text="icon.value" @click="iconClickMy(icon)" >
</van-grid-item>
</van-grid>
---下面总的应用---
//小徽标给了个动态值
<van-grid class="grid" :border="false">
<van-grid-item class="gutter" :badge="icon.state?'':'+'" v-for="icon in iconList" :key="icon.key" :icon="icon.src" :text="icon.value" @click="buttonClick(icon)" >
</van-grid-item>
</van-grid>
---配置iconlist---
iconListMy: [
{key: 'aa', value:'应用1', state:false, src:require('')},
{key: 'bb', value:'应用2',state:false, src:require('')},
{key: 'cc', value:'应用3',state:false, src:require('')},
{key: 'dd', value:'应用4',state:1, src:require('')},...
],
iconList: [
{key: 'aa', value:'应用1', state:true, src:require('')},
{key: 'bb', value:'应用2',state:true, src:require('')},
{key: 'cc', value:'应用3',state:true, src:require('')},
{key: 'dd', value:'应用4',state:1, src:require('')},...
],
先看点击上面的方法:
//点击事件
//点击上面的进行上面应用的减法
iconClickMy(e){
for (var i = 0; i < this.iconListMy.length; i++) {
if( this.iconListMy[i].key === e.key){
this.iconListMy.splice(i,1)
break;
}
}
//下面的小徽标由无变为“+”
for (var j = 0; j < this.iconList.length; j++) {
if(this.iconList[j].key === e.key ) {
this.iconList[j].state = false
break;
}
}
},
上面的做完后,点击下面的也很轻松地完成了,要注意:若上面的应用为空的话,就进不去写的循环里面所以应该做个判断,若为空就直接push。因为我这个是数组中套对象的形式,查找数组中是否包含某个key值相等的值,用find方法很好用,find是真的很强大!
下面的代码实现:
//点击下面的
//下面的状态更改就可以了
buttonClick(e){
for (var i = 0; i < this.iconList.length; i++) {
if( this.iconList[i].key === e.key){
this.iconList[i].state = true
break;
}
}
//上面的list进行变动
if(this.iconListMy.length !== 0){
for (var j = 0; j < this.iconListMy.length; j++) {
if( this.iconListMy.find(v => v.key === e.key)) {
console.log('存在')
break;
} else{
console.log(this.iconList.find(v => v.key === e.key))
console.log('不存在');
this.iconListMy.push(this.iconList.find(v => v.key === e.key))
break;
}
}
}else{
this.iconListMy.push(this.iconList.find(v => v.key === e.key))
}
}
基本功能就实现了,之后应该会涉及到和后端进行交互存储,到时候再更新吧!(感觉做完这个还是很有成就感的)