又有奇怪的需求提出来了，当时我的心情是复杂的，难受：
- 但该写还是得写，其实只是看起来很复杂，基本原理就是在
for循环体里在何时的位置添加元素，页面根据条件渲染即可。 - 当我看到接口文档时，我发现样式也得根据接口来，仿佛文档在告诉我，我们的推荐位是定制的，花样多多。
- 具体实现就是利用了
splice('删除位置', '删除几位', '要添加数据')根据if判断条件在合适的位置插入即可
那就来看下具体实现流程吧，以下数据均为假数据，方便开发时看效果，循环体数据数量与第一推荐位有无均可自行调节
1. 在for循环中添加Dom元素并根据条件渲染
- 特别注意：因为我们的数据是在主循环体里进行插入的，如果主循环体数据存在数据下拉懒加载等则需先删除上一次插入的数据，否则会出现多次插入情况，意思就是先做插入数据删除清空操作再进行插入，防止主循环体数据存在多次请求
<template>
<div class="answer-detail" v-for="(item, index) in sns" :key="index">
<!-- 当循环数据没有第一/第二推荐位时就不展示 -->
<div class="answer-user" v-if="!item.name && !item.age">
<span class="user-name">{{ item.userInfo.userName }}</span>
<!-- 当循环数据有第一/第二推荐位时就展示 -->
<div class='answer-advertisement-user' v-if="item.name">{{item.name}}</div>
<div class='answer-card' v-if="item.age">{{item.age}}</div>
</div>
</div>
</template>
data () {
return {
sns: [{ // 数据循环体
answerContent: '1',
userInfo: {
userTitle: '1'
},
comment: {
data: [{
userInfo: {userName: '11'},
commentContent: '23',
gmtCreated: '22'
}]
}
},
{
answerContent: '1',
userInfo: {
userTitle: '1'
},
comment: {
data: [{
userInfo: {userName: '11'},
commentContent: '23',
gmtCreated: '22'
}]
}
},
{
answerContent: '1',
userInfo: {
userTitle: '1'
},
comment: {
data: [{
userInfo: {userName: '11'},
commentContent: '23',
gmtCreated: '22'
}]
}
},
{
answerContent: '1',
userInfo: {
userTitle: '1'
},
comment: {
data: [{
userInfo: {userName: '11'},
commentContent: '23',
gmtCreated: '22'
}]
}
},
{
answerContent: '1',
userInfo: {
userTitle: '1'
},
comment: {
data: [{
userInfo: {userName: '11'},
commentContent: '23',
gmtCreated: '22'
}]
}
},
{
answerContent: '1',
userInfo: {
userTitle: '1'
},
comment: {
data: [{
userInfo: {userName: '11'},
commentContent: '23',
gmtCreated: '22'
}]
}
},
{
answerContent: '1',
userInfo: {
userTitle: '1'
},
comment: {
data: [{
userInfo: {userName: '11'},
commentContent: '23',
gmtCreated: '22'
}]
}
}],
snsa: { // 控制第一推荐位为不为空
name: '1',
}
}
},
mounted () {
// 等接口数据等定义好后把具体的判断数据改为返回值即可，此处是为了演示看效果才放到这里
// name暂时代表第一推荐位内数据 age暂时代表第二推荐位数据
// 如果主循环体数据存在数据下拉懒加载等则需先清空上一次插入的数据，否则会出现多次插入情况
for(var i=0;i<this.sns.length;i++){
if (!arr[i].answerContent) {
arr.splice(i,1);
}
}
if (this.sns && this.sns.answerContent !== '') {
// 情况一:回答数大于3并且第一推荐位不为空
if (this.sns.length > 2 && this.snsa.name !== '') {
this.oneRecommendedPosition = false
const a = {name: '2'}
const b = {age: '3'}
this.sns.splice(2, 0, a)
this.sns.splice(5, 0, b)
// 情况二:回答数大于3但第一推荐位为空
} else if (this.sns.length > 2 && this.snsa.name === '') {
this.oneRecommendedPosition = true
const b = {age: '4'}
this.sns.splice(2, 0, b)
// 情况三:回答数小于等于3但第一推荐位为空
} else if (this.sns.length <= 2 && this.snsa.name === '') {
this.oneRecommendedPosition = true
const b = {age: '5'}
this.sns.splice(2, 0, b)
// 情况四:回答数小于等于3第一推荐位不为空
} else if (this.sns.length <= 2 && this.snsa.name !== '') {
this.oneRecommendedPosition = false
const a = {name: '6'}
const b = {age: '7'}
this.sns.splice(this.sns.length, 0, a)
this.sns.splice(this.sns.length + 1, 0, b)
}
}
2 . 样式根据接口返回渲染
<!-- 基本样式 -->
<div :style="{'backgroundColor':item,'width':'12px','height':'12px'}">{{item}}</div>
<!-- 背景图片 -->
<div :style="{'backgroundImage':`url(${item})`}" class="answer-card"></div>
网友评论