search

airyland / vux

Mobile UI Components based on Vue & WeUI
https://vux.li
MIT License
17.59k stars 3.71k forks source link

scroller.js:196 Uncaught TypeError: Cannot read property 'classList' of undefined #89

Closed zhipenglin closed 8 years ago

zhipenglin commented 8 years ago

运行你的demo vux-master\src\demos\picker报以上报错

airyland commented 8 years ago

没有遇到这个问题。这个报错是在哪个浏览器？

dsaco commented 8 years ago

我也遇到这个问题了 引picker 按照demo里的代码写的 找不到问题出在哪里

airyland commented 8 years ago

@ds-aco PC开发时出现还是手机调试出现？

dsaco commented 8 years ago

谷歌浏览器的开发者模式下面

airyland commented 8 years ago

@ds-aco 每次都能重现？访问https://vux.li 会报错吗？

dsaco commented 8 years ago

官网上的不会报错 也许是我哪个地方写的不对吧
<picker :data="years" :value.sync="year1" @on-change="change"> import Picker from 'vux/components/picker'; let years = [] for (var i = 2000; i <= 2010; i++) { years.push({ name: i + '年', value: i + '' }) } return{ years: [years], year1: ['2002'] }

dsaco commented 8 years ago

:data="years" :value.sync="year1" @on-change="change"

Uncaught TypeError: Cannot read property 'classList' of undefined

dsaco commented 8 years ago

scrollingComplete 方法中 传给t.selectItem(t.content.children[e]) 里面的e是个NaN e = Math.round((t.scrollTop - t.minScrollTop - t.itemHeight / 2) / t.itemHeight); t.scrollTop:NaN bundle.js:18673 t.minScrollTop:NaN bundle.js:18674 t.itemHeight:0

airyland commented 8 years ago

@ds-aco 如果方便的话，能不能给个build后的打包文件？我这边真是重现不了 :sweat:

dsaco commented 8 years ago

说出来有点害羞啊 把样式引了就好了。。。 我以为import已经把样式引进来了呢
需要在外面引 vux.css 或者相关的样式

airyland commented 8 years ago

@ds-aco 感觉另有原因啊，怎么会样式引入修复了js错误呢 :sweat_smile:

dsaco commented 8 years ago

没引入样式的话 他取到的那个是个NaN 就报了这个错误
我就感觉是我哪个地方没弄对 果然。。。

airyland commented 8 years ago

@ds-aco 确定再也不会出现刚才的问题了么？

dsaco commented 8 years ago

确定 手机上也试了一发 确实没这个问题了

qiguyu commented 8 years ago

我又遇到了同样的问题，打算在现有的项目中集成vux，从demo中复制了picker的代码并稍作改动，新建了一个test.vue文件，运行代码报错Uncaught TypeError: Cannot read property 'classList' of undefined. 是哪里配置不对吗？

<template>
  <div>
    <group-title>默认，不设置默认值时选中第一个</group-title>
    <picker :data='years' :value.sync='year1' @on-change='change'></picker>
    <br>
    <group-title>异步加载及动态改变数据</group-title>
    <picker :data='years001' :value.sync='year001' @on-change='change'></picker>
    <br>
    <x-button type="primary" @click="changeValue([[1,3,5,7,9,11],[2,3,4,5],['a','b','c']])">Set Data1</x-button>
    <x-button type="primary" @click="changeValue([[1,3,5,7,9,11],[2,3,4,5]])">Set Data1</x-button>
    <x-button type="primary" @click="changeValue([[2,4,6,8,10,11]])">Set Data2</x-button>
    <br>
    <group-title>设置默认值时</group-title>
    <picker :data='years' :value.sync='year2' @on-change='change'></picker>
    <br>
    <group-title>双向绑定</group-title>
    <picker :data='years' :value.sync='year3' @on-change='change3'></picker>
    <select v-model='year5'>
      <option v-for='one in years[0]' value='{{one.value}}'>{{one.name}}</option>
    </select>
    <br>
    <group-title>非联动多列</group-title>
    <picker :data='years1' :value.sync='year4' @on-change='change'></picker>
    <br>
    <group-title>五列</group-title>
    <picker :data='year6' :value.sync='year6Value' @on-change='change'></picker>
    <br>
    <group-title>地区联动: 当前值{{year7Value}}</group-title>
    <picker :data='year7' :columns=3 :value.sync='year7Value' @on-change='change'></picker>
    <x-button @click="setData1" type="primary">set Value to ["USA", "usa002", "0005"]</x-button>
    <x-button @click="setData2" type="primary">set Value to ["china", "china002", "gz"]</x-button>
    <x-button @click="setList" type="primary">set List</x-button>
  </div>
</template>

<script>
import { Picker, GroupTitle, XButton } from 'vux'
let years = []
for (var i = 2000; i <= 2030; i++) {
  years.push({
    name: i + '年',
    value: i + ''
  })
}
export default {
  ready () {},
  components: {
    Picker,
    GroupTitle,
    XButton
  },
  methods: {
    changeValue (value) {
      this.years001 = value
    },
    change (value) {
      console.log('new Value', value)
    },
    change3 (value) {
      this.year5 = value[0]
    },
    setData1 () {
      this.year7Value = ['USA', 'usa002', '0005']
    },
    setData2 () {
      this.year7Value = ['china', 'china002', 'gz']
    },
    setList () {
      this.year7.push({
        name: '美国002_003',
        value: '0007',
        parent: 'usa002'
      })
    }
  },
  computed: {},
  watch: {
    year5: {
      handler (val) {
        this.year3[0] = val
        this.year3.$set(0, val)
      },
      deep: true
    },
    change3 (value) {
      this.year5 = value[0]
    }
  },
  data () {
    return {
      years: [years],
      years001: [],
      year001: [''],
      years1: [years, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]],
      year1: [''],
      year2: ['2002'],
      year3: ['2005'],
      year4: ['2002', '4'],
      year5: ['2005'],
      year6: [
        ['你', '我', '他'],
        ['you', 'I', 'him'],
        ['ni', 'wo', 'ta'],
        [1, 2, 3, 4, 5],
        [5, 4, 3, 2, 1]
      ],
      year6Value: ['我', 'him', 'ni', '1', '2'],
      year7: [{
        name: '中国',
        value: 'china',
        parent: 0
      }, {
        name: '美国',
        value: 'USA',
        parent: 0
      }, {
        name: '广东',
        value: 'china001',
        parent: 'china'
      }, {
        name: '广西',
        value: 'china002',
        parent: 'china'
      }, {
        name: '美国001',
        value: 'usa001',
        parent: 'USA'
      }, {
        name: '美国002',
        value: 'usa002',
        parent: 'USA'
      }, {
        name: '广州',
        value: 'gz',
        parent: 'china001'
      }, {
        name: '深圳',
        value: 'sz',
        parent: 'china001'
      }, {
        name: '广西001',
        value: 'gz',
        parent: 'china002'
      }, {
        name: '广西002',
        value: 'sz',
        parent: 'china002'
      }, {
        name: '美国001_001',
        value: '0003',
        parent: 'usa001'
      }, {
        name: '美国001_002',
        value: '0004',
        parent: 'usa001'
      }, {
        name: '美国002_001',
        value: '0005',
        parent: 'usa002'
      }, {
        name: '美国002_002',
        value: '0006',
        parent: 'usa002'
      }],
      year7Value: []
    }
  }
}
</script>
<style>
@import '~vux/dist/vux.css';
</style>
dsaco commented 8 years ago

好久没用这个了 我记得当时因为没有引样式会报错 你把scroller里面的样式引进来估计就好了 你先试试看看

dsaco commented 8 years ago

忘了是scroller里还是picker里 总之是缺少样式 你试试看

qiguyu commented 8 years ago

我在最底部的style标签下引入了整个vux.css，不引入的话整个页面的样式都是错乱的。另外，我用的v0.1.2，文档上说可以分模块引入，可是@import '~vux/dist/components/picker/style.css'也没有把对应的样式加载进来

dsaco commented 8 years ago

<picker :data="titles" :value.sync="titleDefault" @on-change="changeTitle"></picker> data: function() { return { titleDefault:[''], title:'', text:'', titles:[], showLoading:false, } }, methods: { changeTitle(value) { this.title = value[0]; }, ready: function() { this.$http({ url: urls.getTitles, method: 'GET' }) .then(function(response) { this.titles.push(response.data); }) }, 下面是样式 `// picker相关 .scroller-component { display: block; position: relative; height: 238px; overflow: hidden; width: 100% }

.scroller-content { z-index: 1 }

.scroller-content, ...` 这个在开始的时候取titles集合 放进data里 我当时没加上面最后这一段样式报了错 后来放在页面里 就可以正常运行了 相关的代码都在上面了 你试试在html里引这段样式看看 , 然后你把demo删减点留一个picker就行.. 一个能行就都能行 你这太多真错了也不好找

qiguyu commented 8 years ago

简化代码并按照 @ds-aco 的建议添加了样式，问题依旧存在，picker无法滚动，以下是简化后的代码

<template>
  <div>
    <picker :data='years' :value.sync='year1' @on-change='change'></picker>
  </div>
</template>

<script>
import Picker from 'vux/dist/components/picker'
let years = []
for (var i = 2000; i <= 2030; i++) {
  years.push({
    name: i + '年',
    value: i + ''
  })
}
export default {
  ready () {},
  components: {
    Picker
  },
  methods: {
    change (value) {
      console.log('new Value', value)
    }
  },
  data () {
    return {
      years: [years],
      year1: ['']
    }
  }
}
</script>
<style>
@import '~vux/dist/vux.css';
.scroller-component {
display: block;
position: relative;
height: 238px;
overflow: hidden;
width: 100%
}

.scroller-content {
z-index: 1
}
</style>
Guoye commented 8 years ago

使用<datetime>组件，进行选择时间时也会报这个错，但引入了 vux/dist/vux.css 就可以了。希望对其他使用者有帮助。 @airyland image

airyland commented 8 years ago

这个问题比较诡异，我去查一查。

multics commented 8 years ago

你改了哪儿？

在 2016年7月15日，00:36，qiguyu notifications@github.com 写道：

我又遇到了同样的问题，打算在现有的项目中集成vux，从demo中复制了picker的代码并稍作改动，新建了一个test.vue文件，运行代码报错Uncaught TypeError: Cannot read property 'classList' of undefined. 是哪里配置不对吗？

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/airyland/vux/issues/89#issuecomment-232720342, or mute the thread https://github.com/notifications/unsubscribe/ABKoM4F9E0ufrTIYiuJWpZl3RDFgsgp0ks5qVmWqgaJpZM4IC1rf.

airyland commented 8 years ago

@qiguyu 你的报错我重现不了。你的写法是不推荐的，你直接从vux import是从dist import了，而0.1.2开始的不需要vux.css引入是从src引入。

并且文档已经写了你这种写法会导致打包时整个vux组件都打包了。

import Picker from 'vux/src/components/picker'
import GroupTitle from 'vux/src/components/group-title'
import XButton from 'vux/src/components/x-button'
// import { Picker, GroupTitle, XButton } from 'vux'

两段代码我本地运行都正常。

airyland commented 8 years ago

@Guoye 你说的报错我同样重现不了。如果使用v0.1.2请看release的说明。

airyland commented 8 years ago

如果有哪位同学还是有这个问题，麻烦简化下代码，打包个代码给我方便排查 😄