基于vue实现移动端点击上方导航，内容滑动切换，滑动内容导航自动切换。

这是在日常开发过程中常见的选项卡(带滑动切换效果),小白一枚，不足之处还望体谅，包涵，这也是第一次尝试写博客，以后会继续分享一些工作中的问题与收获。

实现效果：

点击上方导航，当前导航添加样式，下方内容滑动切换，滑动下方内容上面导航切换。

第一步：静态布局

html：

<div id="lao" class="warp">
            <!--导航-->
            <div class="navList">
                <ul>
                    <li  v-for="(myliebiaoList,index) in myList">
                        { {myliebiaoList.name}}
                    </li>
                </ul>
            </div>

            <!--内容-->
            <div class="mainContent">                                  
                        <div v-for="lunbo in myContent" >{ {lunbo.name}}</div>                              
            </div>
        </div>

js：

<script src="./dist/js/vue.js"></script> //引入vue.js

<script type="text/javascript">

var vm = new Vue({

     el: '#lao',

     data: {

            myList: [
                {
                    name: '吃'
                },
                {
                    name: '大'
                },
                {
                    name: '白'
                },
                {
                    name: '菜'
                },
                {
                    name: '的'
                },
                {
                    name: '熊'
                }
            ], //存放类型列表
            myContent: [
                {
                    name: '吃'
                },
                {
                    name: '大'
                },
                {
                    name: '白'
                },
                {
                    name: '菜'
                },
                {
                    name: '的'
                },
                {
                    name: '熊'
                }
            ] //存放内容列表

     }

})

 

</script>

基本的上下结构静态页面布局已经有了。

第二步