老师我自己写了一个better-scroll，我只想滚动中间的一个组件（这个组件放List）,但是连用同父组件一起滚动了是怎么回事？？

Question

这个是 vertical.vue （中间放数组数据的）

<template>
  <div class="vertical" ref="scroll_item">
    <div>
      <div>
        <ul>
          <li v-for='(item, index) in list' :key='index' >
            <div class="icon">
              <img width="60" height="60" :src="item.img">
            </div>
            <div class="text">
              <span>{{item.name}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name: 'horizontal',
  data () {
    return {
      list: [
        {
          'img': '../static/list/1.jpg',
          'name': '联想(Lenovo)拯救者R720'
        },
        {
          'img': '../static/list/2.jpg',
          'name': '小米(MI)Pro 15.6英寸'
        },
        {
          'img': '../static/list/3.jpg',
          'name': '联想(Lenovo)小新潮7000 13.3英寸'
        },
        {
          'img': '../static/list/4.jpg',
          'name': '戴尔DELL灵越游匣GTX1050 15.6英寸'
        },
        {
          'img': '../static/list/5.jpg',
          'name': '华硕(ASUS) 飞行堡垒四代FX63VD 15.6英寸'
        },
        {
          'img': '../static/list/6.jpg',
          'name': '联想(Lenovo)拯救者R720 15.6英寸'
        },
        {
          'img': '../static/list/7.jpg',
          'name': '戴尔DELL成就5000不凡银13.3英寸'
        },
        {
          'img': '../static/list/8.jpg',
          'name': '小米(MI)Air 13.3英寸金属'
        },
        {
          'img': '../static/list/9.jpg',
          'name': '联想ThinkPad 翼480（0VCD）14英寸'
        },
        {
          'img': '../static/list/10.jpg',
          'name': '联想(Lenovo)拯救者R720 15.6英寸'
        }
      ]
    }
  },
  methods: {
    _initS () {
      console.log('start')
      let scroll = new BScroll(this.$refs.scroll_item, {
        scrollY: true,
        click: false,
        probeType: 3
      })
      scroll.on('scroll', (pos) => {
        console.log(`Now position is x: ${pos.x}, y: ${pos.y}`)
      })
    }
  },
  created () {
    this.$nextTick(() => {
      setTimeout(() => {
        this._initS()
      }, 20)
    })
  }
}
</script>

他的父组件是

<template>
  <div>
    <div class="header">
      <h2>better-scroll 范例</h2>
    </div>
    <div class="tab" style="height: 44px;line-height: 44px">
      <router-link class="text-align: center" to="/horizontal">
        <span class="padding-bottom: 5px">横向滚动</span>
      </router-link>
      <router-link class="text-align: center" to="/vertical">
        <span class="padding-bottom: 5px">纵向滚动</span>
      </router-link>
    </div>
  </div>
</template>

为什么联通父组件也一起滚动了啊

Answer 1

ustbhuangyi 2018-05-10 23:22:31

嵌套 better-scroll，内部的 better-scroll 设置一下 stopPropagation:true

• 提问者 快乐的蜗牛牛 #1

  加了还是一样的，连同父组件一起动了，跟我把这个scroll去掉了感觉是一样的，但是也没报错

• ustbhuangyi 回复 提问者 快乐的蜗牛牛 #2

  你需要用最新版的 better-scroll

• 提问者 快乐的蜗牛牛 回复 ustbhuangyi #3

  用的就是最新的1.11.1

点开查看后面3条评论