vue内容横向循环滚动_在Vue中使用better-scroll实现横向滚动和竖向滚动

exportdefault{

name:"better_scroll",

data() {return{

currentIndex:0, //当前显示的下标

listHeight: [],

scrollY:0,

menuIndexChange:true};

created() {this.$nextTick(() =>{this._initScroll();this.personScroll();this.height();

});

mounted() {},

methods: {//横轴初始化

personScroll() {//动态设置宽度

let width = this.width();this.$refs.li1.style.width = width + "px";this.$nextTick(() =>{if (!this.scroll) {this.scroll = new BScroll(this.$refs.personWrap, {

startX:0,

click:true,

scrollX:true,

scrollY:false,

eventPassthrough:"vertical",

bounce:false});

}else{this.scroll.refresh();

}

});

},//新建滚动实例并监听竖轴滚动的高度

_initScroll() {this.wrapperScroll = new BScroll(this.$refs.wrapper, {

click:true, //better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。

probeType: 3, //这个属性设置之后可以监听得到了

bounce: false});//监听滚动事件

this.wrapperScroll.on("scroll", pos =>{//当允许滚动并滚动的y轴小于0

if (this.menuIndexChange && pos.y <= 0) {this.scrollY = Math.abs(Math.round(pos.y)); //滚动距离

//console.log(this.scrollY);

//循环每一个模块距离顶部的高度

for (let i = 0; i < this.listHeight.length; i++) {

let height1= this.listHeight[i];

let height2= this.listHeight[i + 1];if(!height2 ||(this.scrollY >= height1 && this.scrollY

) {//console.log(i);

this._followScroll(i); //横轴动画移动

this.currentIndex =i;return;

}

});

},//获取横轴宽度

width() {

let wrap1= this.$refs.li1.children;

let sum= 0;for (var i = 0; i < wrap1.length; i++) {

sum+=wrap1[i].offsetWidth;

}return sum + wrap1.length * 16 * 2;

},//获取竖轴每个模块的高度

height() {

let wrap2= this.$refs.li2.children;

let height= 0;this.listHeight.push(height);for (let i = 0; i < wrap2.length; i++) {

let item=wrap2[i];

height+=item.clientHeight;this.listHeight.push(height);

}

},//点击横轴滚动

select(index, event) {//PC页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到PC端时,点击事件会被执行两次,

if (!event._constructed) {return;

}this.currentIndex = index; //改变点击的当前样式

this.menuIndexChange = false; //禁用竖轴滚动防止横竖轴都改变index 解决运动时listenScroll依然监听的bug

//横纵向右偏移16

this._followScroll(index); //横轴动画移动

//竖轴滚到响应位置

let wrap2 = this.$refs.li2.children;

let el=wrap2[index];this.wrapperScroll.scrollToElement(el, 300);//竖轴滚动结束后在允许动画

this.wrapperScroll.on("scrollEnd", () =>{this.menuIndexChange = true;

});

},//横轴滚动到当前元素并向右移动16px

_followScroll(index) {

let wrap1= this.$refs.li1.children;

let el=wrap1[index];if (index < wrap1.length / 2) {this.scroll.scrollToElement(el, 300, -16, 0);

}

};

vue内容横向循环滚动_在Vue中使用better-scroll实现横向滚动和竖向滚动相关推荐

vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
vue 同级页面调用方法_【Vue】一个vue页面调用另一个vue页面中的方法
想仿着 vue-material 的 Demo & Document 页面的效果写一个小例子. 遇到问题的地方是: 如上图红色圈出的地方,点击 button 按钮时,无法执行 toggle() ...
vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识:https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过a ...
vue设置输入框输入长度_基于vue的限制输入框可输入字节数的解决方案
2018年07月11日基于vue的限制输入框可输入字节数的解决方案需求:input输入框输入上限4个字节.达到上限则不能继续输入,其中1个英文表示1个字节.1个中文表示2个字节. 看到这个需求,第 ...
vue.js 常见面试题_使用Vue.js时应避免的常见错误
vue.js 常见面试题 Looking for a front-end framework to try out, I started with React and then tried Vue.j ...
vue 给取data值_一些Vue相关的面试题，帮助求职者提升竞争力
Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是Web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来我就给大家分享一些Vue相关的面试题,帮助大家提升 ...
vue.js组件的练习_由Vue.js开发的电阻器颜色练习网站
vue.js组件的练习 ResisColor (ResisColor) ⚡ A resistor color practice website develop by Vue.js. ⚡电阻器颜色练习网 ...
vue两个按钮切换_在vue中实现多个按钮样式的点击切换？
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
vue前台导出zip文件_在Vue.js中使用JSZip实现在前端解压文件的方法_心病_前端开发者...
1.在 action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBefore" ...
java 横向打印出来_在双工模式下使用Java打印横向文档
我有一个JasperReports报告要在双面打印机上以横向模式打印.在此我要支持PCL5和PCL6打印驱动程序. 在互联网上搜索,我发现了以下代码片段来完成这项工作: import java.awt ...

vue内容横向循环滚动_在Vue中使用better-scroll实现横向滚动和竖向滚动

vue内容横向循环滚动_在Vue中使用better-scroll实现横向滚动和竖向滚动相关推荐

最新文章

热门文章