本文实例为大家分享了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 首页
 分类
 购物车
 我的
 分类
- {{item.list}}
- {{item.list}}
{{item.text}}
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。