开发者学堂课程【移动 Web 前端开发：产品-初始化滑动页签】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8466
产品-初始化滑动页签
在前面已经完成了产品区块的页签，现在还差一个响应式的处理，在移动端并没有显示的非常好，在移动端可以看到页签导航是掉下来的，原因是宽度只有那么大，只能存放一定数量，多了之后就会掉下来。
第一步要解决往下掉的问题，只需要让大容器足够宽就可以。
现在装每一个页签的容器应该是 li，后面是用 ul 来装的，那么只要 ul 足够宽 li 就不会往下掉了。最小应该是所有 li 的宽度之和。
现在有一个 ul，里面装了七个 li，七个 li 的宽度比 ul 的宽度更长，所以要把 ul的宽度设置成七个 li 之和。
现在想让七个 li 能进行滑动，意味着让 ul 进行滑动就可以了，这时候能联想到轮播图。
Ul 是根据手指来回的做定位，让 ul 再父容器里显示，父容器里包含子容器，子容器里包含若干个页签，才能进行滑动。
<div class="container">
<ul class="nav nav-tabs" role="tablist">
li class="active"><a href="#wjs_product_tabe1"data-
toggle="tab">特别推荐</a><li>
<li><a href="#wjs_product_tabo2" data-toggle="tab">微平台</a></li>
<li><a href="#wjs _product_tabe3" data-toggle="tab">微平台</a></li>
<li><a href="#wjs_product_tabo4" data-toggle="tab">微平台</a></li>
<li><a href="#wjs_product_tabes" data-toggle="tab">微平台</a></li>
<li><a href="#wjs_product_tabe6" data-toggle="tab">微平台</a></li>
<li>a href="#wjs_product_tabo7" data-toggle="tab">微平台</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="wjs_product_tabe1">1</div>
<div class="tab-pane" id="wjs_product_tabo2">2</div>
<div class="tab-pane" id="wjs_product_tabo3">3</div>
<div class="tab-pane" id="wjs_product_tabe4">4</div>
<div class="tab-pane" id="wjs_product_tab05">5</div>
<div class="tab-pane" id="wjs product_tabe6">6</div>
<dif class="tab-pane" id="wjs_product_tab07">7</div>
</ div>
这个容器的父容器是 container ，但是 content 还包含其他的东西，这时候想让 ul 进行滑动，需要给 ul 加入父元素。
初始化标签切换：
var initTab = function(){
1.把所有的页签在一行显示 设置父容器的宽度是所有子容器的宽度之和
2.满足区域滚动的 html 结构要求必须有大容器套着一个小容器
3.实现滑动功能 使用区域滚动插件iscroll
实现：1.
获取到 ul，通过产品区域找到 nav-tabs
父容器：
var tabs = $( ".wjs_product .nav-tabs ' ) ;
所有的子容器：
var lilist = tabs.find( ' li ');
计算宽度 X 和
var width = o;
将所有 li 的宽度加上去，获取到当前的 li 并打印出来：
$.each(liist,function(i,item){
console.log($(item).width());
调用初始化页签：
initTab（）；
打印出来后追加到 width ：
$.each( lilist,function(i,item){
console. log($(item).width());
width= $(item).width()
将宽度设置为 ul：
tabs.width（width）；
刷新，虽然不出滚动条，但是却没有放下来，原因是宽度不够。
通过console.log($(item).width());看一下这个宽度是获取的哪里的。
刷新，第一个是86，找到这个容器，找到 li
获取到的是86，而86是内部的宽，所以不够，因为每一个格子还有15px。
现在 width 是获取内容的宽度，获取其他的宽度方式是：
Innerlwidth：
获取内容和内边距的宽度
Outerwidth：
获取内容和内边距和边框的宽度
outerwidth(true)：
获取内容和内边距和边框和外边距的宽度
所以：
width +=$(item).outerwidth(true)
这时候出现滚动条，原因是没有套父容器抑制隐藏：
2.在 index.html 中写入：
<div class="nav-tabs-parent">
<ul class="nav nav-tabs" role="tablist">
li class="active"><a href="#wjs_product_tabe1" data-
toggle="tab">特别推荐</a></li>
<li><a href="#wjs_product_tabe2" data-toggle="tab">微平台</a></li>
<li><a href="#wjs_product_tabe2" data-toggle="tab">微平台</a></li>
<li><a href="#wjs_product_tabe2" data-toggle="tab">微平台</a></li>
<li><a href="#wjs_product_tabe2" data-toggle="tab">微平台</a></li>
<li><a href="#wjs_product_tabe2" data-toggle="tab">微平台</a></li>
<li><a href="#wjs_product_tabe2" data-toggle="tab">微平台</a></li>
套用完后里面的页签切换功能并不会受影响，因为是通过 id 关联的。
父容器准备好后，需要设置 nav-tabs-parent 样式：
在 index.css 中写入：
.wjs_product .nav-tabs-parent{
width: 100%;
overflow: hidden;
这时就没有滚动条了。
3.实现滑动功能 使用区域滚动插件 iscroll：
新建 iscroll 文件，在内库里将 iscroll.js 复制到新建 iscroll 文件中
使用第一个 js文件引入，按照父元素与子元素的定义设置好接着初始化，默认是纵向滚动，横向滚动需要用到options.startXs 和 options.start Y.参数。
在 index.html 中写入：
ll/is.croll·js">
在 index.js 中写入：
new IScrol1( .nav-tabs-parent' ,{ //初始化的容器
现在是横向滚动所以：
scrollx:true,
scrollY:false
});
这时能滚动了，初始化页签滚动就完成了。
