其实我觉得很简单，难点就2个。首先是滑动，这里用了better-scroll这个组件，可以在网上搜，挺好用的。另一个就是页面布局的问题，写点css还是没得问题的。
首先去better-scroll的官网，按着他的核心逻辑抄一下。不详细谈了，总之来说，会有三层嵌套。我个人命名他们为: wrapper 和content和 item 这三层。
先弄一个json，当做会被填充的数据。
export const chatItems = [ { type:1, message:"fdaf地方撒风大撒风阿斯顿飞fd阿斯顿飞安德森发大水发大水发大水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"fdaf地方撒风大撒aa风阿斯顿飞ffdsafsfadsfadsfjlkjsadflkosdajfl asdjlffsaf水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"做紧d咩嘢?", from:2, timestamp: new Date() }, { type:1, message:"？？？", from:2, timestamp: new Date() }, ] 然后开始写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, // 上下滚动
click: true, // 开启点击事件
startY: document.querySelector(".scroll-wrapper").clientHeight - this.$refs.scroll.scrollHeight + 5 , // 初始高度
mouseWheel: true, // 鼠标滚动
probeType: 2, // listening scroll hook
});
// 下面的不要也行，官网抄的顺便留下来了
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; // 非常之关键
} </style>
最后是这个样子的了