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 滚动问题
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/edec5208eb0875226998d9aecbf682eb.png#pic_center)
- 需要监听每一张图片的高度,因此需要在
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封装 实现上拉加载更多