vue之better-scroll封装滚动

vue之better-scroll封装

• 下载安装：
  • npm i better-scroll --save

vue之better-scroll封装简单的滚动

• 创建一个公共的组件 scroll/Scroll.vue

<!-- B基于Better-scroll 滚动组件 -->
<template>
  <!-- 外层一个容器 内层内容是滚动区域 注意点：就是内容需要高于容器 -->
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "Scrool",
  data() {
    return {
      scroll: null
    };
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
    });
  },
  methods: {}
};
</script>
<style  lang="scss" scoped>
</style>

引用这个滚动组件 BScroll .vue

• 引入这个组件
  • 注册组件
  • 样式的话，需要给content设置一个高度
  • 外层的home 需要设置100vh视高 定位为了更好！
  • 固定在中间之中！

    <BScroll class="content">
      <Recommend :RecommendList="RecommendList"></Recommend>
      <TabControl :titles="titles" @tabClick="tabClick"></TabControl>
      <GoodsList :goodsList="showGoods"></GoodsList>
    </BScroll>
    
<style lang="scss">
.home {
  height: 100vh;
  position: relative;
}
.content {
  // 需要给外层的 父容器 设置高度 100vh
  position: absolute;
  top: 44px;
  bottom: 44px;
  left: 0;
  right: 0;
  overflow: hidden;
  background: #ccc;
}
</style>

vue之better-scroll封装返回顶部

scroll.vue组件

<!-- 基于Better-scroll 滚动组件 -->
<template>
  <!-- 外层一个容器 内层内容是滚动区域 注意点：就是内容需要高于容器 -->
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "Scrool",
  props: {
    // 传入的参数 是否需要监听这个滚动的位置
    probeType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      scroll: null
    };
  },
  mounted() {
    // 注意点：为了这边直接设置 probeType: 3 会一直监听影响性能 因此需要传递参数进来
    // 1：创建BScroll 对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: this.probeType, //监听滚动的位置
      pullUpLoad: true, // 确保上拉加载更多
      click: true // 确保这个 BScroll组件 可以触发点击事件
    });
    // 2：监听滚动位置 需要 probeType 设置为true是才能监听
    this.scroll.on("scroll", position => {
      // console.log("res", position);
      this.$emit("scroll", position);
    });
    // 3：上拉加载更多 需要pullUpLoad 设置为true是才能触发
    this.scroll.on("pullingUp", () => {
      true, console.log("上拉加载更多");
    });
  },
  methods: {}
};
</script>
<style  lang="scss" scoped>
</style>

backTop.vue

• 返回顶部 借助scroll对象中的 scrollTo方法，返回顶部
  • 这需要在引用这个返回顶部组件的时候，在 home.vue等组件中使用

<!-- 返回顶部 -->
<template>
  <div class="back_top">返回顶部</div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  methods: {},
  components: {}
};
</script>
<style  lang="scss" scoped>
.back_top {
  position: fixed;
  bottom: 50px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 9;
  background: yellow;
}
</style>

home.vue

• 带有滚动事件
• 还有返回顶部

<template>
  <div class="home" v-if="category">
    <!-- codewhy -->
    <nav-bar>
      <div slot="center">购物街</div>
    </nav-bar>
    <BScroll class="content" ref="Bscroll" :probeType="3" @scroll="scroll">
      <Recommend :RecommendList="RecommendList"></Recommend>
      <TabControl :titles="titles" @tabClick="tabClick"></TabControl>
      <GoodsList :goodsList="showGoods"></GoodsList>
    </BScroll>
    <!-- 组件中进行 监听事件 需要添加 native-->
    <BackTop @click.native="backClick" v-show="isShowBackTop"></BackTop>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import Recommend from "@/components/Recommend.vue";
import TabControl from "@/components/TabControl.vue";
import GoodsList from "@/components/goods/GoodsList.vue";
import BackTop from "@/components/BackTop.vue";
import BScroll from "@/components/scroll/scroll.vue";

export default {
  data() {
    return {
      category: [],
      active: 0,
      RecommendList: ["推荐1", "推荐2", "推荐3", "推荐4"],
      titles: ["流行", "精选", "超值"],
      // 获取 商品数据
      // goodsPop: { type: "pop", page: 0, data: [] },
      // goodsNew: { type: "new", page: 0, data: [] },
      // goodsSell: { type: "sell", page: 0, data: [] }
      // codewhy
      goods: {
        pop: {
          page: 0,
          list: [
            {
              id: 1,
              imgUrl: "XXX",
              price: 992,
              info: "我是流行1"
            },
            {
              id: 2,
              imgUrl: "XXX",
              price: 888,
              info: "我是流行2"
            },
            {
              id: 3,
              imgUrl: "XXX",
              price: 111,
              info: "我是流行3"
            },
            {
              id: 4,
              imgUrl: "XXX",
              price: 111,
              info: "我是流行4"
            },
            {
              id: 5,
              imgUrl: "XXX",
              price: 111,
              info: "我是流行5"
            }
          ]
        },
        new: {
          page: 0,
          list: [
            {
              id: 1,
              imgUrl: "XXX",
              price: 991,
              info: "我是精选"
            },
            {
              id: 2,
              imgUrl: "XXX",
              price: 888,
              info: "我是精选2"
            },
            {
              id: 31,
              imgUrl: "XXX",
              price: 111,
              info: "我是精选3"
            }
          ]
        },
        sell: {
          page: 0,
          list: [
            {
              id: 1,
              imgUrl: "XXX",
              price: 991,
              info: "我是超值"
            },
            {
              id: 2,
              imgUrl: "XXX",
              price: 888,
              info: "我是超值2"
            },
            {
              id: 31,
              imgUrl: "XXX",
              price: 111,
              info: "我是超值3"
            }
          ]
        }
      },
      currentType: "pop",
      isShowBackTop: false
    };
  },
  components: {
    NavBar,
    Recommend,
    TabControl,
    GoodsList,
    BackTop,
    BScroll
  },
  created() {
    // 购物开始 流行 新款 热卖 codewhy
    // this.getHomeGoods("pop");
    // this.getHomeGoods("new");
    // this.getHomeGoods("sell");
  },
  // // codewhy 对应tab切换是 需要显示的的数据 就是向goodList组件传递下去的数据
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    }
  },
  methods: {
    // 购物开始
    // codewhy 发起请求 或者到对应 tab点击的数据！ 点击的时候 根据不同的tab类型 发起请求
    // getHomeGoods(type) {
    //   // 最初为0页 然后第一页的时候 才有数据 于是 发起请求前 需要先+1
    //   const page = this.goods[type].page + 1;
    //   // 发起请求
    //   this.$api.getHomeGoods((type, page)).then(res => {
    //     this.goods[type].list.push(...res.data.list);
    //     this.goods[type].page += 1;
    //   });
    // },
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },

    // 返回顶部  点击返回到 scroll滚动区域的顶部 需要拿到BScroll组件 然后调用里面的那个返回顶部方法
    backClick() {
      this.$refs.Bscroll.scroll.scrollTo(0, 0, 1000);
    },
    // BScroll组件 包裹的内容的 滚动事件
    scroll(position) {
      console.log("滚动的", position);
      this.isShowBackTop = -position.y > 100 ? true : false;
    }
  },
  watch: {}
};
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
  position: relative;
}
.content {
  // 需要给外层的 父容器 设置高度 100vh
  position: absolute;
  top: 44px;
  bottom: 44px;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>

解决better_scroll 滚动问题

• 需要监听每一张图片的高度，因此需要在 GoodsListItem.vue组件之中，给每一个img添加一个 @load事件然后触发
• 因此需要借助事件总线的方式去处理这个bug
  • 在GoodsListItem.vue中发射一个事件,然后绕过GoodsList.vue，在home.vue组件中接受这个发射来的事件，然后调用这个更新方法(图片加载完毕)
  • 需要在main.js中，Vue原型上定义一个事件总线对象！
    • // 事件总线对象 Vue.prototype.$bus = new Vue();
  • GoodListITem.vue 发射item中每一项img加载完毕事件
    • <img :src="goodsListItem.imgUrl" alt @load="imgLoad" />
    • imgLoad() { // 通过事件总线 发送事件 this.$bus.$emit("itemImgLoad"); }
  • Home.vue 接受事件总线，监听到item中的img加载完毕后，调用更新函数，重新计算那个可以滚动的高度！
    • this.$bus.$on("itemImgLoad", () => { this.$refs.Bscroll.refresh(); });

vue之better-scroll封装 实现上拉加载更多