使用者互動聊天，看陪玩平臺原始碼怎麼透過html實現

陪玩平臺原始碼聊天室的評論滾動效果，下劃檢視歷史訊息並停止滾動，如有新訊息會出現新訊息提醒，點選滾動到底部。

2.具體程式碼

• {{item.name}}：

  {{item.content}}

{{restComment}}條新訊息

import smoothscroll from 'smoothscroll-polyfill';

import { debounce, isScrollBottom } from '../utils/utils';

smoothscroll.polyfill(); // 移動端scrollTo behavior: "smooth"動畫失效的polyfill

export default {

data() {

return {

list: [],

restComment: 0,

restNums: 0,

wrapperDom: null,

listDom: null,

wrapperHeight: 0

};

},

mounted() {

this.initDom();

// ajax...

const data = new Array(20).fill('');

this.queue(data);

setTimeout(() => {

const list = new Array(10).fill('');

this.queue(list);

}, 30000);

},

methods: {

initDom() {

this.wrapperDom = this.$refs.wrapper;

this.listDom = this.$refs.list;

this.wrapperHeight = this.wrapperDom.offsetHeight;

},

addTimeOut(opt) {

return new Promise((resolve, reject) => {

setTimeout(() => {

this.addComment(opt);

resolve()

}, 500);

});

},

// 佇列新增訊息

async queue(data) {

for (let i = 0; i < data.length; i++) {

const opt = {

name: i + "-使用者名稱",

content: i + "-評論內容",

id: Date.now()

}

await this.addTimeOut(opt);

}

},

addScroll() {

debounce(this.listScroll, 200);

this.isBindScrolled = true;

},

listScroll() {

const ele = this.wrapperDom;

const isBottom = isScrollBottom(ele, ele.clientHeight);

if (isBottom) {

this.restNums = 0;

this.restComment = 0;

}

},

// 新增評論 如果超過150條就將前50條刪除

addComment(data) {

if (this.list.length >= 150) {

this.list.splice(0, 50);

}

this.list.push(data);

this.$nextTick(() => {

this.renderComment();

});

},

// 渲染評論

renderComment() {

const listHight = this.listDom.offsetHeight;

const diff = listHight - this.wrapperHeight; // 列表高度與容器高度差值

const top = this.wrapperDom.scrollTop; // 列表滾動高度

if (diff - top < 50) {

if (diff > 0) {

if (this.isBindScrolled) {

this.isBindScrolled = false;

this.wrapperDom.removeEventListener("scroll", this.addScroll);

}

this.wrapperDom.scrollTo({

top: diff + 10,

left: 0,

behavior: "smooth"

});

this.restNums = 0;

}

} else {

++this.restNums;

if (!this.isBindScrolled) {

this.isBindScrolled = true;

this.wrapperDom.addEventListener("scroll", this.addScroll);

}

}

this.restComment = this.restNums >= 99 ? "99+" : this.restNums;

},

// 滾動到底部

scrollBottom() {

this.restNums = 0; // 清除剩餘訊息

this.restComment = this.restNums;

this.wrapperDom.scrollTo({

top: this.listDom.offsetHeight,

left: 0,

behavior: "smooth"

});

}

}

};

*{

padding: 0;

margin: 0;

}

.comment{

width: 70%;

height: 350px;

position: relative;

margin: 100px 0 0 20px;

}

.comment-wrap{

height: 350px;

overflow-y: scroll;

-webkit-overflow-scrolling:touch;

}

.comment-wrap li{

text-align: left;

line-height: 30px;

padding-left: 10px;

background: rgba(0, 0, 0, 0.3);

margin-top: 5px;

border-radius: 15px;

color: #fff;

}

.rest-nums{

position: absolute;

height: 24px;

line-height: 24px;

color: #f00;

border-radius: 15px;

padding: 0 15px;

bottom: 10px;

background: #fff;

font-size: 14px;

left: 10px;

}

用的的兩個工具函式

/**

* @desc 函式防抖

* @param {需要防抖的函式} func

* @param {延遲時間} wait

*/

export function debounce(func, wait = 500) {

// 快取一個定時器id

let timer = 0;

// 這裡返回的函式是每次使用者實際呼叫的防抖函式

// 如果已經設定過定時器了就清空上一次的定時器

// 開始一個新的定時器，延遲執行使用者傳入的方法

return function (...args) {

if (timer) clearTimeout(timer)

timer = setTimeout(() => {

func.apply(this, args)

}, wait)

}

}

/**

* @desc 是否滾到到容器底部

* @param {滾動容器} ele

* @param {容器高度} wrapHeight

*/

export function isScrollBottom(ele, wrapHeight, threshold = 30) {

const h1 = ele.scrollHeight - ele.scrollTop;

const h2 = wrapHeight + threshold;

const isBottom = h1 <= h2;

return isBottom;

}

總結

到此這篇關實現陪玩平臺原始碼聊天室評論滾動效果的程式碼的文章就介紹到這了

宣告：本文由雲豹科技轉發自coco-young部落格，如有侵權請聯絡作者刪除