请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

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

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

正在回答 回答被采纳积分+3

6回答

ustbhuangyi 2018-12-05 15:23:07

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

4 回复 有任何疑惑可以回复我~
  • 提问者 小徐子是我 #1
    就是那个轮播图滑动不了,在silider组件里面给每个div成功加了类名,宽度也设置了但是轮播图片的样式还是不正确
    回复 有任何疑惑可以回复我~ 2018-12-05 15:54:19
  • 提问者 小徐子是我 #2
    怎么不回复啊
    回复 有任何疑惑可以回复我~ 2018-12-05 16:29:16
提问者 小徐子是我 2018-12-05 23:34:15

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

0 回复 有任何疑惑可以回复我~
  • Deft丶 #1
    我滴个同学呀,stylus class名的层级你没搞清楚啊,没生效是因为你div上少了一个父级class 啊
    回复 有任何疑惑可以回复我~ 2018-12-06 09:05:28
  • https://github.com/ustbhuangyi/vue-music/blob/master/src/base/slider/slider.vue
    这是项目的 slider 源码,哪来的 height:200px
    回复 有任何疑惑可以回复我~ 2018-12-06 09:14:25
  • 提问者 小徐子是我 回复 ustbhuangyi #3
    是稍早一点的源码,但是早一点的那套源码也能跑起来并且没问题一切正常
    回复 有任何疑惑可以回复我~ 2018-12-06 10:41:04
提问者 小徐子是我 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>



0 回复 有任何疑惑可以回复我~
提问者 小徐子是我 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


}


0 回复 有任何疑惑可以回复我~
提问者 小徐子是我 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>



0 回复 有任何疑惑可以回复我~
提问者 小徐子是我 2018-12-05 15:33:02

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

0 回复 有任何疑惑可以回复我~
  • 是不一样呀,所以你遇到什么具体的问题呢,可以发出来,我可以帮助你解决呀
    回复 有任何疑惑可以回复我~ 2018-12-05 15:33:51
  • 提问者 小徐子是我 #2
    ……就是那个轮播图滑动不了,在silider组件里面给每个div成功加了类名,宽度也设置了但是轮播图片的样式还是不正确
    回复 有任何疑惑可以回复我~ 2018-12-05 15:43:30
  • 提问者 小徐子是我 回复 ustbhuangyi #3
    ……就是那个轮播图滑动不了,在silider组件里面给每个div成功加了类名,宽度也设置了但是轮播图片的样式还是不正确
    回复 有任何疑惑可以回复我~ 2018-12-05 15:46:58
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信