效果见：https://www.rightknights.com/new_home
四个状态：
1、判定当前文章是否是打开状态
2、浮动的操作栏固定在该div底部不随着滚动条移动
3、浮动的操作栏消失
4、关闭文章时滚动条回到相应位置
解决 状态1：
当获取数据是添加一个变量判断是否是打开或者关闭；
通过ajax获取列表数据时：
this.lists.forEach(item => {
item.open = false;
})
在拿到的数据里添加open 来判定当前是否是打开状态；
openArticl(key,index){
var _this = this;
let arr = [];
for (let i = 0; i < _this.lists.data.contentList.length; i++) {
if (index == i) {
if(_this.lists.data.contentList[i].open==true){
_this.lists.data.contentList[i].open = false;
Vue.set(_this.lists.data.contentList, i, _this.lists.data.contentList[i]);
_this.closeItemScroll(index);
}else{
$.ajax({
url: '请求地址",
dataType: 'json',
type: "get",
async: false,
success: function(d) {
_this.allText = d.data.content==""?"":d.data.content;
}
})
_this.lists.data.contentList[i].open = true;
Vue.set(_this.lists.data.contentList, i, _this.lists.data.contentList[i]);
_this.ItemScroll(index);
}
} else{
_this.lists.data.contentList[i].open =false;
Vue.set(_this.lists.data.contentList, i, _this.lists.data.contentList[i]);
}
}
}
（当点击时获取当前点击的index）
先遍历列表，确认当前点击的是哪一个打开，如果当前点击的按钮是关闭就设置开启，否则就是关闭；
牵扯到一个坑：
修改数据某个对象的属性，vue列表并没有重新渲染，
Vue官网解释：
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()，pop()，shift()，unshift()，splice()，sort()，reverse()。
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：
Vue.set(vm.items, indexOfItem, newValue) 第一个参数修改对象，第二个参数修改的index，第三个参数修改值。、
解决 状态2，3：
1、当滚动条向上滑动在当前可视窗口div要消失时，需要将操作栏隐藏
image
2、当滚动条向下滑动在当前可视窗口div要消失时，需要将操作栏固定在当前文章的下方
效果见：https://www.rightknights.com/new_home
明显判断条件： 某个值 <= 判断值 <= 某个值
找到中间值需要添加一个div --> fixed定位在可视窗口外的下边缘
展示内容的div : ConDiv
fixed定位的div：FixedDiv
展示内容的div高度： ConDivHeight
判断条件变为：
FixedDiv.offset().top-ConDiv.offset().top-ConDivHeight.height()>0 说明操作栏应固定在文章底部
FixedDiv.offset().top-ConDiv.offset().top < 300 说明操作栏应该消失
ItemScroll(i){
$(document).ready(function(){
let a1 = $('.ConIteamLine').offset().top-$('.articlesList-child').eq(i).offset().top-$('.articlesList-child').eq(i).height();
let b1 = $('.ConIteamLine').offset().top-$('.articlesList-child').eq(i).offset().top;
if(a1>0 || b1<400){
$('.articlesList-child').eq(i).children('.articles-action').removeClass('is-fixed');
$('.articlesList-child').eq(i).children('.ConItem-Placeholder').hide();// 当隐藏操作栏时隐藏占位div
}else{
$('.articlesList-child').eq(i).children('.articles-action').addClass('is-fixed');
$('.articlesList-child').eq(i).children('.ConItem-Placeholder').show();//当操作栏浮动时添加占位div
}
})
$(window).on('scroll',function(){
let a = $('.ConIteamLine').offset().top-$('.articlesList-child').eq(i).offset().top-$('.articlesList-child').eq(i).height()
let b = $('.ConIteamLine').offset().top-$('.articlesList-child').eq(i).offset().top;
if(a>0 || b<400){
$('.articlesList-child').eq(i).children('.articles-action').removeClass('is-fixed');
$('.articlesList-child').eq(i).children('.articles-action').removeClass('bs-line');
$('.articlesList-child').eq(i).children('.ConItem-Placeholder').hide();
}else{
$('.articlesList-child').eq(i).children('.articles-action').addClass('is-fixed');
$('.articlesList-child').eq(i).children('.articles-action').addClass('bs-line');
$('.articlesList-child').eq(i).children('.ConItem-Placeholder').show();
}
})
}
主要思路就是：找到一个中间值能平衡并关联其他两个条件
网友评论