真搞不懂那些说清晰的人，源码和视频代码都不一样，真他妈坑

Question

真搞不懂那些说清晰的人，应该是只看不敲的人吧，源码和视频代码都不一样，这门课程是真他么坑

Answer 1

ustbhuangyi 2018-12-05 15:23:07

不一样有很多原因，比如 Vue.js 版本升级的坑导致播放问题，我需要改代码
一些细节的优化的 bug 修复，我需要改代码
更重要的是视频的播放来源都来自真实的第三方线上接口，当接口变了，不满足需求的时候，我需要改代码。
Vue cli 脚手架升级，webpack 配置变了，我也需要改代码。
http://ustbhuangyi.com/music/#/recommend
这个页面是 GitHub 最新源码编译生成的，仍然跑的好好的，就是因为我做了这些代码改变。
如果我保持代码和视频完全一样，完全不更新，整个项目跑不起来，才是真正的坑。
视频 1-2 小节写了获取源码的方式，最新源码都是保持同步更新的，而且有很多 issue 甚至是文章可以参考，我不知道你去看了没有。
这门课是高级课程，教的很多也是思想和方法，如果不加思考一味的只知道照着视频敲，遇到这些不一样的时候就会不知所措。
举个例子，视频里的接口变了，那么我们是不是按照视频教的思路，自己从官方去找新的接口？很多同学这么做了，加深了学习的印象，效果反而更好。
所以，如果你学习遇到什么具体问题了，可以在问答区提出来，如果只是单纯的一味吐槽，对你是没有任何帮助的。

• 提问者 小徐子是我 #1

  就是那个轮播图滑动不了，在silider组件里面给每个div成功加了类名，宽度也设置了但是轮播图片的样式还是不正确

• 提问者 小徐子是我 #2

  怎么不回复啊

Answer 2

提问者 小徐子是我 2018-12-05 23:34:15

是a标签的height：200px没有生效，不知道哪里的问题
项目源码也是height200px但是就没有问题

• Deft丶 #1

  我滴个同学呀，stylus class名的层级你没搞清楚啊，没生效是因为你div上少了一个父级class 啊

• ustbhuangyi #2

  https://github.com/ustbhuangyi/vue-music/blob/master/src/base/slider/slider.vue
  这是项目的 slider 源码，哪来的 height:200px

• 提问者 小徐子是我 回复 ustbhuangyi #3

  是稍早一点的源码，但是早一点的那套源码也能跑起来并且没问题一切正常

点开查看后面14条评论

Answer 3

提问者 小徐子是我 2018-12-05 23:01:58

<template>

<div id="slider" ref="slider">

<div class="slider-group" ref="sliderGroup">

<slot>

</slot>

</div>

<div class="dots">

<span class="dot" >

</span>

</div>

</div>

</template>

<script>

import {addClass} from 'common/js/dom'

import {getRecommend} from 'api/recommend'

import {ERR_OK} from 'api/config'

import BScroll from 'better-scroll'

export default {

name: 'slider',

props: {

loop: {

type: Boolean,

default: true

},

autoplay: {

type: Boolean,

default: true

},

interval: {

type: Number,

default: 4000

}

},

data() {

return {

dots: [],

currentPageIndex: 0

}

},

created(){

},

mounted() {

setTimeout(()=>{

this._setSliderWidth()

// this._initDots()

// _initSlider

this._initSlider()

},20)

setTimeout( () => {

},20)

},

methods:{

_setSliderWidth() {

this.children = this.$refs.sliderGroup.children

console.log(this.children)

let width = 0

let sliderWidth = this.$refs.slider.clientWidth

console.log(sliderWidth)

for (let i = 0; i < this.children.length; i++) {

let child = this.children[i];

addClass(child, 'slider-item')

child.style.width = sliderWidth + 'px'

width += sliderWidth

}

if(this.loop) {

width += 2 * sliderWidth

console.log(width)

}

this.$refs.sliderGroup.style.width = width + 'px'

},

_initSlider() {

}

}

}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

@import "~common/stylus/variable"

.slider

min-height: 1px

.slider-group

position: relative

left:0

top:0

overflow: hidden

white-space: nowrap

.slider-item

float: left

box-sizing: border-box

overflow: hidden

text-align: center

a

display: block

width: 100%

overflow: hidden

height: 200px

text-decoration: none

img

display: block

width: 100%

.dots

position: absolute

right: 0

left: 0

bottom: 12px

text-align: center

font-size: 0

.dot

display: inline-block

margin: 0 4px

width: 8px

height: 8px

border-radius: 50%

background: $color-text-l

&.active

width: 20px

border-radius: 5px

background: $color-text-ll

</style>

Answer 4

提问者 小徐子是我 2018-12-05 23:01:34

export function addClass(el, className) {

if(hasClass(el, className)){//className如果有就返回false继续向下执行,如果没有就是truename就return

return

}

let newClass = el.className.split(' ')

newClass.push(className)

el.className = newClass.join(' ')

}

export function hasClass(el, className) {

let reg = new RegExp('(^|\\s)' + className +'(\\s|$)')

return reg.test(el.className)//className如果有就返回false

}

Answer 5

提问者 小徐子是我 2018-12-05 23:00:50

<template>

<div class="recommend">

<div class="recommend-content">

<div v-if="recommends.length" class="slider-wrapper">

<div class="slider-content">

<slider ref="slider">

<div v-for="(item,index) in recommends" :key="index">

<a :href="item.linkUrl">

<img class="needsclick" :src="item.picUrl">

</a>

</div>

</slider>

</div>

</div>

</div>

</div>

</template>

<script>

import Slider from 'base/slider/slider'

import {getRecommend} from 'api/recommend.js'

import {ERR_OK} from 'api/config'

export default {

data() {

return {

recommends: []

}

},

created(){

},

methods:{

_getRecommend() {

getRecommend().then((res) => {

if (res.code === ERR_OK) {

this.recommends = res.data.slider

console.log(this.recommends)

}

})

}

},

mounted() {

setTimeout(()=>{

this._getRecommend()

},20)

},

components: {

Slider

},

}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

@import "~common/stylus/variable"

.recommend

position: fixed

width: 100%

top: 88px

backgroun:red

bottom: 0

.recommend-content

height: 100%

overflow: hidden

.slider-wrapper

position: relative

width: 100%

height: 0

padding-top: 40%

overflow: hidden

.slider-content

position: absolute

top: 0

left: 0

width: 100%

height: 100%

.recommend-list

.list-title

height: 65px

line-height: 65px

text-align: center

font-size: $font-size-medium

color: $color-theme

.item

display: flex

box-sizing: border-box

align-items: center

padding: 0 20px 20px 20px

.icon

flex: 0 0 60px

width: 60px

padding-right: 20px

.text

display: flex

flex-direction: column

justify-content: center

flex: 1

line-height: 20px

overflow: hidden

font-size: $font-size-medium

.name

margin-bottom: 10px

color: $color-text

.desc

color: $color-text-d

.loading-container

position: absolute

width: 100%

top: 50%

transform: translateY(-50%)

</style>

Answer 6

提问者 小徐子是我 2018-12-05 15:33:02

这种课程源码起码是个参考，现在视频和源码都不一样，去哪找问题找对比，而且guthub代码也是不一样的

• ustbhuangyi #1

  是不一样呀，所以你遇到什么具体的问题呢，可以发出来，我可以帮助你解决呀

• 提问者 小徐子是我 #2

  ……就是那个轮播图滑动不了，在silider组件里面给每个div成功加了类名，宽度也设置了但是轮播图片的样式还是不正确

• 提问者 小徐子是我 回复 ustbhuangyi #3

  ……就是那个轮播图滑动不了，在silider组件里面给每个div成功加了类名，宽度也设置了但是轮播图片的样式还是不正确

点开查看后面3条评论