vue基于better-scroll仿京东分类列表

本文实例为大家分享了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

 

* {
 margin: 0;
 padding: 0;
}
html {
 height: 100%;
}
body {
 height: 100%;
 background-color: #efeff4;
}
a {
 text-decoration: none;
 color: #000;
}
li {
 list-style: none;
}
.clearfix:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
 font-size: 0;
}
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 height: 100%;
}

4、tabbar.vue

.tabbar {
 position: fixed;
 display: flex;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 42px;
 padding-top: 8px;
 background-color: #fff;
 .tab_list {
 flex: 1;
 i {
 font-size: 18px;
 }
 p {
 font-size: 14px;
 }
 }
 .active {
 color: #ffaf77;
 }
}

5、class.vue



.class {
 height: 100%;
 .head {
 position: fixed;
 z-index: 999;
 top: 0;
 left: 0;
 height: 44px;
 width: 100%;
 line-height: 44px;
 text-align: center;
 color: #fff;
 background-color: #ff8c3c;
 i {
 position: absolute;
 left: 10px;
 }
 }
 .main {
 display: flex;
 height: 100%;
 .wrapper {
 overflow: hidden;
 width: 80px;
 height: 100%;
 background-color: #fff;
 .content {
 padding-top: 40px;
 padding-bottom: 80px;
 li {
 height: 40px;
 width: 80px;
 line-height: 40px;
 padding-left: 10px;
 text-align: left;
 background-color: #fff;
 border: 1px solid #efeff4;
 }
 .active {
 background-color: #efeff4;
 border-left: 2px solid #ff0000;
 }
 }
 }
 .detialList_box {
 flex: 1;
 overflow: hidden;
 margin: 0 8px;
 background-color: #fff;
 .detialList {
 padding-bottom: 20px;
 li {
 float: left;
 width: 33.3333333%;
 img {
 width: 100%;
 }
 }
 .detial_title{
 height: 40px;
 width: 100%;
 line-height: 40px;
 margin-top: 40px;
 background-color: #efeff4;
 }
 }
 .padding_color {
 background-color: #efeff4;
 height: 100%;
 }
 }
 }
}

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。