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

来源:4-11 scroll 组件的抽象和应用(下)

快乐的蜗牛牛

2018-05-10

这个是 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>

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

写回答

1回答

ustbhuangyi

2018-05-10

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

0
6
ustbhuangyi
回复
快乐的蜗牛牛
你这个布局有问题,内容的高度和容器的高度相等了,不符合 better-scroll 的滚动条件。
2018-05-16
共6条回复

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

Vue.js高级知识应用大集合,实战企业级APP,教你搞定组件化开发。

5432 学习 · 3804 问题

查看课程