vue项目自定义指令实例之滚动到底部

最新推荐文章于 2024-08-09 11:20:59 发布

热爱°可抵岁月漫长

最新推荐文章于 2024-08-09 11:20:59 发布

阅读量657

点赞数 1

本文链接：https://blog.csdn.net/weixin_46337813/article/details/114015470

版权

官方地址：https://cn.vuejs.org/v2/guide/custom-directive.html

触发条件：v-scroll-bottom="session.currentSessionMsg"

当session.currentSessionMsg数据发生变动是触发

参考代码：

html：

 <ul
      v-if="
        session && session.currentSessionMsg && session.currentSessionMsg.length
      "
      :data-need="needScrollBottom"
      v-scroll-bottom="session.currentSessionMsg"
    >
      <viewer>
        <li v-for="(item, index) in session.currentSessionMsg" :key="index">
          <p class="time">
            <span>{{ item.msgCreateTime }}</span>
          </p>
          <div class="main" :class="{ self: item.sysUserContent }">
            <div
              class="avatar"
              v-if="item.sysUserAvatar"
              :style="{
                background: `url(${item.sysUserAvatar}) no-repeat center center`,
              }"
            ></div>
            <div
              class="avatar"
              v-if="item.playerAvatar"
              :style="{
                background: `url(${item.playerAvatar}) no-repeat center center`,
              }"
            ></div>
            <div
              class="text-content"
              v-html="item.playerContent || item.sysUserContent"
            >
              <!-- {{}} -->
            </div>
          </div>
        </li>
      </viewer>
    </ul>

js：

 directives: {
    // 发送消息后滚动到底部
    "scroll-bottom"(el) {
        //注意：Vue 要在当前页面 import Vue from 'vue'
        Vue.nextTick(() => {
          el.scrollTop = el.scrollHeight - el.clientHeight;
        });
      
    },
  },