效果.gif

TAB 切换

tab切换效果.gif

HTML

<body>
  <main>
    <section>1</section>
    <section>2</section>
    <section>3</section>
  </main>
  <footer>
    <div class="result">
      <span class="iconfont icon-fon1"></span>
      <!-- iconfont图标 -->
      <span>Top250</span>
    </div>
    <div>
      <span class="iconfont icon-fon2"></span>
      <!-- iconfont图标 -->
      <span>北美</span>
    </div>
    <div>
      <span class="iconfont icon-fon3"></span>
      <!-- iconfont图标 -->
      <span>搜索</span>
    </div>
  </footer>
</body>

css

 <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html,
    body,
    main {
      height: 100%;
      position: relative;
    }
    body {
      font-size: 12px;
      line-height: 1.1;
    }
    a {
      text-decoration: none;
      color: #ccc;

    }
/*main开始*/
   main{
      height: calc(100vh - 50px);
      overflow: scroll;
      -webkit-overflow-scrolling: touch; /*在iOS上有弹性效果*/
    }
    main>section {
      display: none;
    }
    main>section:first-child {
      display: block;
    }
/*main结束*/

/*footer开始*/
    footer {
      position: absolute;
      bottom: 0;
      height: 50px;
      width: 100%;
      display: flex;
      box-shadow: 0 0 0 1px #ccc;
    }
    footer>div {
      flex: 1;
      text-align: center;
      padding-top: 10px;
      color: #666;
    }
    footer>div>span {
      display: block;
    }
    footer .result {
      color: #33AA61;
    }
/*footer结束*/
  </style>

js

<script>
 $('footer>div').click(function(){
  var index = $(this).index()//1、当点击footer>div的时候获取它的index
   $('section').hide().eq(index).fadeIn() //2、mian页面切换，所有的section隐藏,再eq当前点击的元素,fadeIn()逐渐改变被选元素的不透明度，从隐藏到可见。
   $(this).addClass('result').siblings().removeClass('result') //按钮颜色切换
 })
 </script>

tab切换总结：

被点击的按钮为 display: block;
其它未被按钮为 display: none;

top250页面

1、发请求获取数据。
2、拼装DOM。
3、展示到页面上。
4、滚动的时候再获取数据，重复1、2、3。

1、获取数据豆瓣电影API

  $.ajax({
    url:'http://api.douban.com/v2/movie/top250',
    type:'GET',
    data:{
      start:0, //从0开始
      count:20 //到20结束
    },
    dataType:'json'
  }).done(function (ret) {
    console.log(ret)
  }).fail(function () {
    console.log('失败啦.....')
  })

跨域报错

跨域报错.png

解决方法：修改 dataType:'json'为dataType:'jsonp'

运行结果

结果.png

2、拼装DOM，展示到页面上。

把数据生成多个dom，生成好之后展示到页面上。

 function setData(data) {
     //遍历数据
      data.subjects.forEach(function name(movie) {
      //生成字符串,注意ES6语法 ` `
        var tpl =
          `
      <div class="box">
            <a href="#">
              <div class="print">
                <img src="#" alt="">
              </div>
              <div class="text">
                <h2>霸王别姬</h2>
                <div class="intro">
                  <span class="grade">9.6</span>分 /
                  <span class="collect">12312</span>收藏
                </div>
                <div class="intro">
                  <span class="year">1994</span> /

                  <span class="type">犯罪</span>
                </div>
                <div class="intro">
                  导演：<span class="director">李安</span>
                </div>
                <div class="intro">
                  主演： <span class="starring">李磊、阿道夫</span>
                </div>
              </div>
            </a>
          </div>
      `
      //把数据塞进字符串中
        var $node = $(tpl)
        $node.find('.print img').attr('src', movie.images.medium) //设置图片数据
        $node.find('.text h2').text( movie.title)//设置电影名称
        $('section').eq(0).append($node)//展示到（section）页面上
      })


    }

ps:注意setData()要在获取到数据时执行，也就是在.done中执行。

获取数据后展示到页面上.png

4、滚动的时候再获取数据

当滚动到底部的时候重新去获取数据，再拼装DOM放到页面的底部。

问题：如何判断滚动到底部？

页面面板总长度 = 视窗高度 + 滚动高度

页面面板总长度 ： $('section').eq(0).height()
视窗高度 ：$('main').height()
滚动高度 ：$('main').scrollTop()

理解图.png

    //index变量
    var index = 0
    start()
    function start() { //把获取数据封装在start()函数里面
      $.ajax({
        url: '//api.douban.com/v2/movie/top250',
        type: 'GET',
        data: {
          start: index, //从0开始
          count: 20 //到20结束
        },
        dataType: 'jsonp'
      }).done(function (ret) {
        console.log(ret)
        index += 20 //当请求成功的时候加20
        setData(ret)
      }).fail(function () {
        console.log('失败啦.....')
      })

    }

    $('main').scroll(function () {
      if ($('section').eq(0).height() == $('main').scrollTop() + $('main').height()) {
        start()//再执行获取数据的函数
      }
    })

效果图.gif

北美页面搜索页面都差不多一样。

源码：https://github.com/luoshushu/Douban-Movie-basics

移动端豆瓣电影开发总结