建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)vue scroll如何實現(xiàn)滾動判斷？，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)建站是專業(yè)的承德縣網(wǎng)站建設(shè)公司，承德縣接單;提供做網(wǎng)站、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行承德縣網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
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 }) // 隱藏直達(dá)最新消息按鈕
this.isBottom = true
this.isTop = false
} else {
this.$store.dispatch('setBottomBtn', true, { root: true }) // 顯示直達(dá)最新消息按鈕
this.isTop = false
this.isBottom = false
if (scrollTop == 0) {
this.isTop = true
}
}
},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
},3、滾動節(jié)流
1）、在滾動的dom上綁定scroll事件，監(jiān)聽滾動
2）、data中定義：fnScroll: () => {}, 初始值
3）、mounted中給fnScroll函數(shù)賦值，_.throttle實現(xiàn)滾動節(jié)流
this.fnScroll = _.throttle(() => {
}, 500)4、獲取滾動可視區(qū)域內(nèi)dom：
實現(xiàn)注意：判斷當(dāng)前元素是否在可視區(qū)域內(nèi)，若在則存到isSeeDomArr中，然后循環(huán)isSeeDomArr數(shù)組，拿到當(dāng)前可視區(qū)域內(nèi)的最后一個dom,再去判斷是否更新對應(yīng)的咨詢軌跡。
不要滾動時就去更新，這樣會造成不停請求更新，最后一次請求可能無效，造成數(shù)據(jù)的錯亂
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]) //將可視區(qū)域內(nèi)所有dom存儲到isSeeDomArr
}
}
if (isSeeDomArr.length) {
// 非 ceo接診臺更新消息的已讀狀態(tài)
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)
}
}
}
// 更新聊天對應(yīng)的咨詢軌跡
this.setCurrentFdAsk(
isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')
)
}
},the end：滾動加載這些判斷前前后后改了好多次，這次終于感覺邏輯比較清晰了，也算對自己有個交代。。。
關(guān)于vue scroll如何實現(xiàn)滾動判斷？就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
新聞名稱：vuescroll如何實現(xiàn)滾動判斷？
網(wǎng)站鏈接：http://www.ef60e0e.cn/article/jhgjsj.html
