vue+better-scroll实现类似京东的分类列表

效果图和目录结构

1、main.js（需要安装router）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '../src/assets/js/mock'
import axios from 'axios'

axios.defaults.baseURL='http://mockjs.com/api'
Vue.prototype.$http=axios
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2、router.js

如果字体图标引入错误，百度阿里字体图标引入方法

import Vue from 'vue'
import Router from 'vue-router'
import './assets/css/iconfont.css' //全局引入字体图标

Vue.use(Router)

export default new Router({
  linkExactActiveClass:'active',
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: ()=>import('./views/home.vue')
    },
    {
      path: '/class',
      name: 'class',
      component: () => import('./views/class.vue')
    },
    {
      path: '/shopcart',
      name: 'shopcart',
      component: () => import('./views/shopcart.vue')
    }, 
    {
      path:'/me',
      name:'me',
      component:()=>import('./views/me.vue')
    }
  ]
})

 3、App.vue

4、tabbar.vue

5、class.vue