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

来源: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 甚至是文章可以参考,我不知道你去看了没有。
这门课是高级课程,教的很多也是思想和方法,如果不加思考一味的只知道照着视频敲,遇到这些不一样的时候就会不知所措。
举个例子,视频里的接口变了,那么我们是不是按照视频教的思路,自己从官方去找新的接口?很多同学这么做了,加深了学习的印象,效果反而更好。
所以,如果你学习遇到什么具体问题了,可以在问答区提出来,如果只是单纯的一味吐槽,对你是没有任何帮助的。

4
2
小徐子是我
怎么不回复啊
2018-12-05
共2条回复

小徐子是我

提问者

2018-12-05

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

0
17
小小前端猿
回复
小徐子是我
这个弟弟现在还在前端的话也干了快四年了,会为当初说的蠢话害羞吗?
2022-09-13
共17条回复

小徐子是我

提问者

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>



0
0

小徐子是我

提问者

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


}


0
0

小徐子是我

提问者

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>



0
0

小徐子是我

提问者

2018-12-05

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

0
6
小徐子是我
回复
ustbhuangyi
两天了,一直没看到是哪的问题
2018-12-05
共6条回复

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

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

5432 学习 · 3804 问题

查看课程