今日写项目遇到的几个问题

1.用active-class添加选中样式 第一个导航按钮 选中或不选中 都有样式

<ul>
                    <router-link
                        v-for="data in tabList"
                        :key="data.id"
                        :to="data.path"
                        tag="li"
                        active-class="active"
                        exact
                    > <i class="iconfont" :class="data.icon"></i> <p>{{data.title}}</p></router-link>         
               
            </ul>


  data(){
        return{
            isShow:1,
            tabList:[
                {id:1,title:"首页",path:"/",icon:"icon-smile"},
                {id:2,title:"分类",path:"/classify",icon:"icon-viewgallery"},
                {id:3,title:"购物车",path:"/shopping",icon:"icon-cart"},
                {id:4,title:"我的",path:"/center",icon:"icon-account"},
            ]
        }
    },

这种现象 是to="/" 引起的 active-calss选择演示是根据路由中的路径去匹配的的然后显示
例如 在cassify页面中 路由localhost:8000/#/calssify 那么to="/" 和 to="/classify" 都能匹配到 所以都会激活

• 解决方法有两种
  第一种方法 ：

//直接在路由文件中配置 linkActiveClass
export default new Router({
	linkExactAvtiveClass:"active"
})

第二种方法 ：

//在router-link中写入exact
<router-link to="/home" active-class="active" exact>首页</router-link>

2.在router-link标签中 添加事件驱动不了

//需要添加native修饰符 
<router-link @click.native="fun"></router-link>

better-scroll 无法轮动问题 解决

1.wrapper 不能有并列的子元素 如果有多个子元素 必须写在 content里面
2.content的高度 要高于wrapper

<div class="wrapper"  :style="{height:scrollHeight,overflow:'hidden'>
	<div class="content">
		//滚动的内容
	 </div>
</div>

import BetterScroll from "better-scroll"

mounted(){
        this.scrollHeight = document.documentElement.clientHeight - 90 +"px"
        new BetterScroll(".content",{
            scrollbar:{
                fade:true
            },
            click:true
        })
    },