其實(shí)我覺(jué)得很簡(jiǎn)單，難點(diǎn)就2個(gè)。首先是滑動(dòng)，這里用了better-scroll這個(gè)組件，可以在網(wǎng)上搜，挺好用的。另一個(gè)就是頁(yè)面布局的問(wèn)題，寫(xiě)點(diǎn)css還是沒(méi)得問(wèn)題的。
首先去better-scroll的官網(wǎng)，按著他的核心邏輯抄一下。不詳細(xì)談了，總之來(lái)說(shuō)，會(huì)有三層嵌套。我個(gè)人命名他們?yōu)? wrapper 和content和 item 這三層。
先弄一個(gè)json，當(dāng)做會(huì)被填充的數(shù)據(jù)。
export const chatItems = [ { type:1, message:"fdaf地方撒風(fēng)大撒風(fēng)阿斯頓飛fd阿斯頓飛安德森發(fā)大水發(fā)大水發(fā)大水奮斗發(fā)的大撒風(fēng)安德森 發(fā)大發(fā)大水發(fā)", from:1, timestamp: new Date() }, { type:1, message:"fdaf地方撒風(fēng)大撒aa風(fēng)阿斯頓飛ffdsafsfadsfadsfjlkjsadflkosdajfl asdjlffsaf水奮斗發(fā)的大撒風(fēng)安德森 發(fā)大發(fā)大水發(fā)", from:1, timestamp: new Date() }, { type:1, message:"做緊d咩嘢?", from:2, timestamp: new Date() }, { type:1, message:"？？？", from:2, timestamp: new Date() }, ] 然后開(kāi)始寫(xiě)vue的代碼
<template> <div class="scroll-wrapper" ref="scroll"> <div class="scroll-content"> <chat-item v-for="item in chatItems" :key="item.message" :type="item.type" :message="item.message" :timestamp="item.timestamp" :from="item.from" ></chat-item> </div> </div> </template> <script> import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel"
import ChatItem from "./ChatItem";
import { chatItems } from "../../../assets/data/items";
BScroll.use(MouseWheel)
export default {
name: "",
data() {
return {
chatItems,
bs: null
};
},
components: {
"chat-item": ChatItem,
},
mounted() {
this.init();
},
beforeDestroy() {
this.bs.destroy();
},
methods: {
// better-scroll的代碼
init() {
this.bs = new BScroll(this.$refs.scroll, {
scrollY: true, // 上下滾動(dòng)
click: true, // 開(kāi)啟點(diǎn)擊事件
startY: document.querySelector(".scroll-wrapper").clientHeight - this.$refs.scroll.scrollHeight + 5 , // 初始高度
mouseWheel: true, // 鼠標(biāo)滾動(dòng)
probeType: 2, // listening scroll hook
});
// 下面的不要也行，官網(wǎng)抄的順便留下來(lái)了
this.bs.on("scroll", ({ y }) => {
console.log("scrolling:" + y);
});
this.bs.on("scrollEnd", () => {
console.log("scrollingEnd");
});
},
clickHandler(item) {
alert(item);
},
},
}; </script> <style lang="scss" scoped> .scroll-wrapper {
height: calc(100% - 160px); // 留一些空間給 打字的地方 和 header
overflow: hidden; // 非常之關(guān)鍵
} </style>
最后是這個(gè)樣子的了