Vue 中使用better-scroll实现选中位置切换

Vue 中使用better-scroll实现选中位置切换

scrollToElement关键方法

效果图

1. 首先初始化一个better-scroll

1. 导入import BScroll from 'better-scroll'
2. html代码

• 说明： 绑定的ref为了获取对应的DOM元素

  <template>
      <div class="classify_box">
          <!-- 分类内容 -->
          <div class="classify_content">
              <div class="left_warp" ref="left_warp">
                  <div class="left_warp_content" >
                      <div 
  	                    :class="[ index == isActive? 'isActive': '', 'left_item']" 
  	                    v-for="(item, index) in 20" 
  	                    :key="index" 
  	                    @click="leftItemClick(index)"
  	                    ref="left_warp_item">
  	                    数码{{index}}
  	                  </div>
                  </div>
              </div>
              <div class="right_warp"></div>
          </div>
      </div>
  </template>
  

3. js代码

• 说明： 给点击事件leftItemClick传入index是为了修改data中的isActive，用来设置当前选中的样式
• this.left_Scroll = new BScroll(left_wrapper,{click: true}) 中设置click:true是用来开启点击事件，better-scroll是默认禁止点击事件的
• 在beforeDestroy中销毁实例化的better-scroll
• this.left_Scroll.scrollToElement(getItemElement, 300,0,true,'easing')关键代码，可以跳转到指定的元素

  <script>
  import BScroll from 'better-scroll'
  export default {
      data(){
          return {
              isActive: 0
          }
      },
      mounted() {
          this.$nextTick(() => {
              this.init()
          })
      },
      methods: {
          // 初始化
          init() {
              let left_wrapper = this.$refs.left_warp
              this.left_Scroll = new BScroll(left_wrapper,{
                  click: true
              })
          },
          // 左边的点击事件
          leftItemClick(index){
              if(this.isActive === index) return 
              this.isActive = index
              this.left_warp_item(index)
          },
          // 点击的时候左边 滚动
          left_warp_item(index){
              const getItemElement = this.$refs.left_warp_item[index]
              this.left_Scroll.scrollToElement(getItemElement, 300,0,true,'easing')
          }
      },
      beforeDestroy(){
          this.left_Scroll.destroy()
      }
  }
  </script>