vue中的better-scroll横向滚动案例

2022-09-25 09:45:58

1.安装
better-scroll 托管在 Npm 上,执行如下命令安装:

npm install better-scroll --save;

2.引入

import BScroll from 'better-scroll'

如果是ES5语法
var BScroll = require('better-scroll')
<template><divclass="box"><divclass="person-wrap" ref="personWrap"><ulclass="person-list" ref="li1"><liclass="person-item":class="{'current':currentIndex===index}"
          v-for="(item,index) in 7":key="index"
          @click="select(index,$event)">{{item}}</li></ul></div><divclass="wrapper" ref="wrapper"><divclass="content" ref="li2"><div v-for="(item,index) in 7":key="index">{{item}}</div></div></div></div></template><style scoped lang="scss">*{
  margin:0;
  padding:0;
  box-sizing: border-box;}.box{
  width:100%;
  height:100%;}.person-wrap{
  overflow: hidden;
  height:38px;.person-list{
    list-style-type: none;.person-item{
      float: left;
      line-height:36px;
      margin:016px;
      white-space: nowrap;}.current{
      color: #004299;
      border-bottom:2px solid #004299;}}}.wrapper{
  height:600px;
  background: pink;
  overflow: hidden;.content{
    display: block;
    div{
      height:200px;
      border-bottom:1px solid red;
      text-align: center;
      line-height:200px;&:last-of-type{
        height:600px;}}}}</style><script>import BScrollfrom"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=newBScroll(this.$refs.personWrap,{
            startX:0,
            click:true,
            scrollX:true,
            scrollY:false,
            eventPassthrough:"vertical",
            bounce:false});}else{this.scroll.refresh();}});},//新建滚动实例  并监听竖轴滚动的高度_initScroll(){this.wrapperScroll=newBScroll(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轴小于0if(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< height2)){//   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//横纵向右偏移16this._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);}}}};</script>


  • 作者:前端江太公
  • 原文链接:https://jiangwenxin.blog.csdn.net/article/details/106503273
    更新时间:2022-09-25 09:45:58