在线音乐FM开发总结

效果图.gif

响应式 大屏幕适配比例协调
页面功能
播放、暂停、下一曲、音乐进度条、音乐分类、音乐分类数据如何获取、获取到数据之后如何切换到下一页 、歌词获取

音乐分类左右滚动按钮

HTML

<div class="list clearfix">
    <ul>
      <li>
        <img src="./img/Dream.png">
        <p>1</p>
      </li>
      <li>
        <img src="./img/Dream.png">
        <p>1</p>
      </li>
      <li>
        <img src="./img/Dream.png">
        <p>1</p>
      </li>
      <li>
        <img src="./img/Dream.png">
        <p>1</p>
      </li>
    </ul>
  </div>

css

......
footer .list{
height: 25vh;
width: 100%;
position: relative;
overflow: hidden;
}
footer ul{
position: absolute;
left: 0;
list-style: none; 
}
......

最初想法
当点击右按钮让整个list往左移动，移动当前list的宽度。

问题1：体验效果不好，最后一个只显示一半

bug

优化
只移动当前完整的li。
当点击左/右按钮，让当前ul做
一个移动，移动当前ul的宽度

css部分
绝对定位ul。
设置left为0
ul父容器(list)必须加高度

li的个数 = Math.floor（list容器的宽度/当前每一个li的宽度）
left = li的个数*当前每一个li的宽度

代码如下

js

this.$right.on('click', function () {
      var itemWidth = _this.$list.find('li').outerWidth(true)
      var rowCount = Math.floor(_this.$list.width() / itemWidth)
      _this.$ul.animate({
        left: '-=' + rowCount * itemWidth
      }, 400)
    }

问题2：到了最后结束没有li了再点出现一片空白

空白.png

优化：
left值 + list的宽度 >= 总体ul宽度
parseFloat 去掉后面的px单位，变成数字。

this.isToStart = true
...省略
 var _this = this
    this.$right.on('click', function () {
      var itemWidth = _this.$list.find('li').outerWidth(true)
      var rowCount = Math.floor(_this.$list.width() / itemWidth)
      if (!_this.isToEnd) { //如果没有到结尾的时候，可以继续点击
        _this.$ul.animate({
          left: '-=' + rowCount * itemWidth
        }, 400, function () {
          //如果到了结尾，isToEnd = true
          if (parseFloat(_this.$list.width()) - parseFloat(_this.$ul.css('left')) >= parseFloat(_this.$ul.css('width'))) {
            _this.isToEnd = true
          }
        })
      }
    })

问题3：当快速点击左/右按钮时，也会出现空白。

优化：
防止用户重复点击

 this.isToEnd = false 
 this.isToStart = true
 this.isAnimate = false //防止重复点击
...省略
 var _this = this
    this.$right.on('click', function () {
      if (_this.isAnimate) return //如果动画正则播放，那么直接退出（return）什么都不做。
      var itemWidth = _this.$list.find('li').outerWidth(true)
      var rowCount = Math.floor(_this.$list.width() / itemWidth)
      if (!_this.isToEnd) { //如果没有到结尾的时候，可以继续点击
        _this.isAnimate = true 
        _this.$ul.animate({
          left: '-=' + rowCount * itemWidth
        }, 400, function () {
          _this.isAnimate = false //等播放完成之后为false
          _this.isToStart = false
          //如果到了结尾，isToEnd = true
          if (parseFloat(_this.$list.width()) - parseFloat(_this.$ul.css('left')) >= parseFloat(_this.$ul.css('width'))) {
            _this.isToEnd = true
          }
        })
      }
    })

待续...