supermall项目开发记录02

supermall项目开发记录

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本文简要记录Scroll和BackTop组件开发过程中的方案问题与解决方案

---

一、Scroll组件

Scroll组件为使特定元素滚动的组件，可在不同项目中复用的组件,存放位置为
components > common > scroll >Scroll.vue

1.模板

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "Scroll",
  props: {
    probeType: {
      type: Number,
      default() {
        return 1;
      },
    },
  },
  data() {
    return {
      scroll: null,
    };
  },
  methods: {
    scrollTo(x, y, time = 300) {
      this.scroll.scrollTo(x, y, time);
    },
  },
  mounted() {
    //不要通过document.querySelector('.wrapper')获取元素，不准确
    //可以使用this.$refs.wrapper
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: this.probeType,
      pullUpLoad: true,
      click: true,
    });

    this.scroll.on("scroll", (position) => {
      this.$emit("scroll", position);
    });
  },
};
</script>
<style scoped>
</style>

2.better-scroll框架

better-scroll框架是一个优秀的开源框架，可用来优化替代原生的scroll.
better-scroll开源项目地址

二、BackUp组件

backup组件是一个为移动端网页下滑过多时一键返回顶部而设计的组件，与项目业务有关
存放位置为
components > content > backup >BackUp.vue

1.模板

代码如下（示例）：

<template>
  <div class="back-top">
    <img src="~assets/img/common/top.png" />
  </div>
</template>
``

```javascript
<script>
export default {
  name: "BackTop",
  methods: {},
};
</script>

<style scoped>
.back-top {
  position: fixed;
  z-index: 9;
  bottom: 60px;
  right: 5px;
}
.back-top img {
  width: 43px;
  height: 43px;
}
</style>

2.问题截图

2.1

代码如下（示例）：
*** better-scroll框架的基本使用***如图



注意: 不可在created( ){ }函数中创建BScroll实例对象，此时DOM元素还未挂载

2.2 .native修饰符

监听原生组件需用.native修饰符

2.3 v-bind 与 ref (父访问子)唯一

---