摘要：当设置为会派发一个事件，我们会给派发的参数加一个私有属性，值为。但是自定义的事件会阻止一些原生组件的行为。
安装
npm install better-scroll --save
引入
import BScroll from "better-scroll"
基础
better-scroll支持多参数配置，可以在初始化的时候传入第二个参数
let scroll = new BScroll(".wrapper",{
scrollY: true, click: true
})
这样就实现了一个纵向可点击的滚动效果
参数说明：
scrollY:Boolean
当设置为true的时候，可以开启纵向滚动
click:Boolean
better-scroll默认会阻止浏览器的原生click事件。当设置为true,better-scroll会派发一个click事件，
我们会给派发的event参数加一个私有属性_constructed，值为true。
但是自定义的click事件会阻止一些原生组件的行为。
Demo:
实现效果:
滑动右侧左侧对应的类别显示高亮
点击左侧的类别名称右侧滑动到对应的位置
分析：
(1)高亮显示通过current类来控制，右侧滑动到不同位置，更新左侧的current显示
(2)即：实时监听scrollY/将右侧每个类的顶部位置记录下来
goods.vue
左侧容器：
右侧容器：
...
JS部分：
data部分:
data(){
return {
//存放右侧foodWrapper容器中，每一个item(li.food-list-hook)距离顶部的height
listHeight:[],
//垂直滚动的距离(实时变化的)
scrolly:0,
//商品列表
goods:[]
}
}
初始化部分:
在created方法中需要进行，数据的获取，以及左侧menuWrapper容器和右侧foodWrapper容器的初始化
created(){
//使用vue-resource请求本地数据，模拟后台数据（注意必须放在static目录下）
this.$http.get("../static/data.json").then(
response=>{
//获取成功之后执行
response=response.body;
this.goods=response.goods;
//为了避免数据请求没有完成，就执行foodWrapper和foodWrapper的scroll初始化
//以及计算current高亮位置的方法就已经执行，其调用应在数据获取成功之后执行
this.$nextTick(()=>{
this._initScroll();
this._calculateHeight()
})
},
error=>{
console.log("调用失败"+error)
}
)
}
methods
_initScroll初始化，实现滚动
_initScroll(){
//初始化左侧滚动（滑动类默认是没有点击的，必须加上click:true才能触发事件）
this.menuScroll=new BScroll(this.$refs.menuWrapper,{
click:true
})
//创建右侧的滚动
/*
probeType:Number
默认值0
可选值：1、2、3
作用：
有时候我们需要知道滚动的位置。当probeType为1的时候，会非实时(屏幕滑动超过一定时间后)
派发scroll事件;当probeType为2时，会在屏幕滑动的过程中实时的派发scroll事件
当probeType为3的时候，不仅在屏幕滑动的过程中，
而且在momentum滚动动画运行过程中实时派发scroll事件
*/
this.foodScroll=new BScroll(this.$refs.foodWrapper,{
probeType:3
click:true
});
//为右侧foodWrapper绑定scroll事件
this.foodScroll.on("scroll",(pos)=>{
//scrolly中存放实时滚动的坐标
this.scrolly=Math.abs(Math.round(pos.y));
})
}
_calculateHeight计算每一个item(li.food-list-hook)距离顶部的height
点击左侧菜单，右侧滚动到对应的位置
selectMenu(index,event){
//index与foodWrapper中每个li.food-list-hook的index相对应
//首先去掉better-scroll自带的点击事件
if(!event._constructed){
return;
}
//获取所有的li.food-list-hook
let foodList=this.$refs.foodWrapper.getElementsByClassName(
"food-list-hook"
);
//与左侧点击元素的下标相对应的右侧的某个li.food-list-hook
let el=foodList[index];
//执行点击后滚动到对应元素的操作
this.foodScroll.scrollToElement(el,300);
}
关于左侧menu current高亮位置的计算
computed:{
currentIndex(){
for(let i=0;iheight&&this.scrolly
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106458.html
摘要：它的核心是借鉴的的实现，它的设计基本兼容，在的基础上又扩展了一些以及做了一些性能优化。注销后，就清除里的信息并跳转到登录页面 1 stylus 预处理 项目文件assets目录下新建stylus文件夹，新建 *.styl文件： showImg(https://segmentfault.com/img/bVbqy2M);variable.styl 存储公共样式，iconfont.sty...
摘要：基于等开发一款移动端音乐，界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库，中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI ...
阅读 690·2021-11-11 16:54
阅读 3004·2021-09-26 09:55
阅读 1933·2021-09-07 10:20
阅读 1154·2019-08-30 10:58
阅读 986·2019-08-28 18:04
阅读 671·2019-08-26 13:57
阅读 3524·2019-08-26 13:45
阅读 1105·2019-08-26 11:42
