1、是否滚动到底部1、是否滚动到底部
isScrollBottom() {

// 是否滚动到了底部

this.box = this.$refs.chatListWrapper

var clientHeight = this.box.clientHeight

var scrollTop = this.box.scrollTop

var scrollHeight = this.box.scrollHeight

if (scrollTop + clientHeight == scrollHeight) {

this.$store.dispatch('setBottomBtn', false, { root: true }) // 隐藏直达最新消息按钮

this.isBottom = true

this.isTop = false

} else {

this.$store.dispatch('setBottomBtn', true, { root: true }) // 显示直达最新消息按钮

this.isTop = false

this.isBottom = false

if (scrollTop == 0) {

this.isTop = true

}

}

},
isScrollBottom() {

// 是否滚动到了底部

this.box = this.$refs.chatListWrapper

var clientHeight = this.box.clientHeight

var scrollTop = this.box.scrollTop

var scrollHeight = this.box.scrollHeight

if (scrollTop + clientHeight == scrollHeight) {

this.$store.dispatch('setBottomBtn', false, { root: true }) // 隐藏直达最新消息按钮

this.isBottom = true

this.isTop = false

} else {

this.$store.dispatch('setBottomBtn', true, { root: true }) // 显示直达最新消息按钮

this.isTop = false

this.isBottom = false

if (scrollTop == 0) {

this.isTop = true

}

}

},2、scroll滚动方向判断2、scroll滚动方向判断

getDirection() {

// scroll滚动方向~~~~

this.box = this.$refs.chatListWrapper

var scrollTop = this.box.scrollTop

var scroll = scrollTop - this.initTop

this.initTop = scrollTop

let dir = 'down'

if (scroll < 0) {

dir = 'up'

} else {

dir = 'down'

}

return dir

},

getDirection() {

// scroll滚动方向~~~~

this.box = this.$refs.chatListWrapper

var scrollTop = this.box.scrollTop

var scroll = scrollTop - this.initTop

this.initTop = scrollTop

let dir = 'down'

if (scroll < 0) {

dir = 'up'

} else {

dir = 'down'

}

return dir

},3、滚动节流3、滚动节流1)、在滚动的dom上绑定scroll事件,监听滚动

2)、data中定义:fnScroll: () => {}, 初始值
3)、mounted中给fnScroll函数赋值,_.throttle实现滚动节流fnScroll: () => {},
this.fnScroll = _.throttle(() => {
}, 500)
this.fnScroll = _.throttle(() => {
}, 500)4、获取滚动可视区域内dom:4、获取滚动可视区域内dom:实现注意:判断当前元素是否在可视区域内,若在则存到isSeeDomArr中,然后循环isSeeDomArr数组,拿到当前可视区域内的最后一个dom,再去判断是否更新对应的咨询轨迹。
不要滚动时就去更新,这样会造成不停请求更新,最后一次请求可能无效,造成数据的错乱

sendRead() {

const chatLi = document

.getElementById('chat_list_wrapper')

.getElementsByTagName('li')

var container = this.$refs.chatListWrapper

var swHeight = container.clientHeight

const scrollTop = container.scrollTop

const aa = swHeight + scrollTop

let isSeeDomArr = []

for (let j = 0; j < chatLi.length; j++) {

if (scrollTop < chatLi[j].offsetTop && chatLi[j].offsetTop < aa) {

isSeeDomArr.push(chatLi[j]) //将可视区域内所有dom存储到isSeeDomArr

}

}

if (isSeeDomArr.length) {

// 非 ceo接诊台更新消息的已读状态

if (this.$route.path.indexOf('diagnose/ceo') === -1) {

for (let m = 0; m < isSeeDomArr.length; m++) {

const isSelfSend = isSeeDomArr[m].getAttribute('isSelfSend')

const msgStatus = isSeeDomArr[m].getAttribute('msgStatus')

const msgType = isSeeDomArr[m].getAttribute('msgType')

if (!isSelfSend && !msgStatus && msgType !== 'notice') {

const _id = isSeeDomArr[m].getAttribute('id')

this.sendReadApi(_id)

}

}

}

// 更新聊天对应的咨询轨迹

this.setCurrentFdAsk(

isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')

)

}

},

sendRead() {

const chatLi = document

.getElementById('chat_list_wrapper')

.getElementsByTagName('li')

var container = this.$refs.chatListWrapper

var swHeight = container.clientHeight

const scrollTop = container.scrollTop

const aa = swHeight + scrollTop

let isSeeDomArr = []

for (let j = 0; j < chatLi.length; j++) {

if (scrollTop < chatLi[j].offsetTop && chatLi[j].offsetTop < aa) {

isSeeDomArr.push(chatLi[j]) //将可视区域内所有dom存储到isSeeDomArr

}

}

if (isSeeDomArr.length) {

// 非 ceo接诊台更新消息的已读状态

if (this.$route.path.indexOf('diagnose/ceo') === -1) {

for (let m = 0; m < isSeeDomArr.length; m++) {

const isSelfSend = isSeeDomArr[m].getAttribute('isSelfSend')

const msgStatus = isSeeDomArr[m].getAttribute('msgStatus')

const msgType = isSeeDomArr[m].getAttribute('msgType')

if (!isSelfSend && !msgStatus && msgType !== 'notice') {

const _id = isSeeDomArr[m].getAttribute('id')

this.sendReadApi(_id)

}

}

}

// 更新聊天对应的咨询轨迹

this.setCurrentFdAsk(

isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')

)

}

},the end:滚动加载这些判断前前后后改了好多次,这次终于感觉逻辑比较清晰了,也算对自己有个交代。。。