真搞不懂那些说清晰的人，源码和视频代码都不一样，真他妈坑
来源：4-4 轮播图组件实现（上)
小徐子是我
2018-12-05
真搞不懂那些说清晰的人，应该是只看不敲的人吧，源码和视频代码都不一样，这门课程是真他么坑
6回答
-
ustbhuangyi
2018-12-05
不一样有很多原因，比如 Vue.js 版本升级的坑导致播放问题，我需要改代码
一些细节的优化的 bug 修复，我需要改代码
更重要的是视频的播放来源都来自真实的第三方线上接口，当接口变了，不满足需求的时候，我需要改代码。
Vue cli 脚手架升级，webpack 配置变了，我也需要改代码。
http://ustbhuangyi.com/music/#/recommend
这个页面是 GitHub 最新源码编译生成的，仍然跑的好好的，就是因为我做了这些代码改变。
如果我保持代码和视频完全一样，完全不更新，整个项目跑不起来，才是真正的坑。
视频 1-2 小节写了获取源码的方式，最新源码都是保持同步更新的，而且有很多 issue 甚至是文章可以参考，我不知道你去看了没有。
这门课是高级课程，教的很多也是思想和方法，如果不加思考一味的只知道照着视频敲，遇到这些不一样的时候就会不知所措。
举个例子，视频里的接口变了，那么我们是不是按照视频教的思路，自己从官方去找新的接口？很多同学这么做了，加深了学习的印象，效果反而更好。
所以，如果你学习遇到什么具体问题了，可以在问答区提出来，如果只是单纯的一味吐槽，对你是没有任何帮助的。422018-12-05 -
小徐子是我
提问者
2018-12-05
是a标签的height：200px没有生效，不知道哪里的问题
项目源码也是height200px但是就没有问题0172022-09-13 -
小徐子是我
提问者
2018-12-05
<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>
00 -
小徐子是我
提问者
2018-12-05
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
}
00 -
小徐子是我
提问者
2018-12-05
<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>
00 -
小徐子是我
提问者
2018-12-05
这种课程源码起码是个参考，现在视频和源码都不一样，去哪找问题找对比，而且guthub代码也是不一样的
062018-12-05
相似问题