Vue开发聊天界面（二）

在之前的Vue开发聊天界面（一）当中，我开发好了一个聊天的item，可以根据发送方和接收方来分别渲染一个item，这一章我把他们放在一个list的界面里面，让一串item构成一个聊天页面，并且这个聊天页面能够上下滚动。
其实我觉得很简单，难点就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>

最后是这个样子的了

image-20200922160354643.png