效果图和目录结构

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 = falsenew 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

<template><div id="app"><router-view></router-view><v-tabbar></v-tabbar></div>
</template>
<script>
import tabbar from '../components/tabbar';
export default {components:{'v-tabbar':tabbar,},
}
</script><style lang="scss">
* {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%;
}
</style>

4、tabbar.vue

<template><div class="tabbar"><div class="tabbar"><router-link class="tab_list" to="/" exact><i class="iconfont"></i><p>首页</p></router-link><router-link class="tab_list" to="/class"><i class="iconfont"></i><p>分类</p></router-link><router-link class="tab_list" to="/shopcart"><i class="iconfont"></i><p>购物车</p></router-link><router-link class="tab_list" to="/me"><i class="iconfont"></i><p>我的</p></router-link></div></div>
</template>
<style lang="scss" scoped>
.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;}
}
</style>

5、class.vue

<template><div class="class"><div class="head"><i class="iconfont"></i><span>分类</span></div><div class="main"><div class="wrapper" ref="wrapper"><ul class="content"><!-- 分类列表 --><li v-for="(item,index) in detialList" :key="index" @click="listClick(index)" :class="index===active?'active':''">{{item.list}}</li></ul></div><div class="detialList_box"><!-- 分类详情列表 --><ul class="detialList clearfix" v-for="(item,index) in detialList" v-show="index===active" :key="index"><li class="detial_title">{{item.list}}</li><li v-for="(item,index) in item.detial" :key="index"><img :src="item.src" alt=""><p>{{item.text}}</p></li></ul><div class="padding_color"></div></div></div></div>
</template>
<script>
import BScroll from "better-scroll";
export default {data() {return {detialList: [ //分类数据{list:'保健品',detial:[{src:require('../assets/images/shop1.png'),text:'爱他美'},{src:require('../assets/images/shop1.png'),text:'爱他美'},{src:require('../assets/images/shop1.png'),text:'爱他美'},{src:require('../assets/images/shop1.png'),text:'爱他美'},{src:require('../assets/images/shop1.png'),text:'爱他美'},{src:require('../assets/images/shop1.png'),text:'爱他美'},]},{list:'酒水',detial:[{src:require('../assets/images/shop1.png'),text:'酒水'},{src:require('../assets/images/shop1.png'),text:'酒水'},{src:require('../assets/images/shop1.png'),text:'酒水'},{src:require('../assets/images/shop1.png'),text:'酒水'},{src:require('../assets/images/shop1.png'),text:'酒水'},{src:require('../assets/images/shop1.png'),text:'酒水'},]},{list:'茶叶',detial:[{src:require('../assets/images/shop1.png'),text:'茶叶'},{src:require('../assets/images/shop1.png'),text:'茶叶'},{src:require('../assets/images/shop1.png'),text:'茶叶'},{src:require('../assets/images/shop1.png'),text:'茶叶'},{src:require('../assets/images/shop1.png'),text:'茶叶'},{src:require('../assets/images/shop1.png'),text:'茶叶'},]},{list:'农产品',detial:[{src:require('../assets/images/shop1.png'),text:'农产品'},{src:require('../assets/images/shop1.png'),text:'农产品'},{src:require('../assets/images/shop1.png'),text:'农产品'},{src:require('../assets/images/shop1.png'),text:'农产品'},{src:require('../assets/images/shop1.png'),text:'农产品'},{src:require('../assets/images/shop1.png'),text:'农产品'},]},],active:0,detialtext:'保健品'};},methods: {listClick(index){ //显示隐藏分类详情this.active=index;this.detialtext=index;}},created() {// mockjs模拟数据// this.$http.get("/detial").then(res => {//   this.detialList=res.data.detials// });},mounted() {this.$nextTick(() => {this.scroll = new BScroll(this.$refs.wrapper, { //better-scroll初始化scrollY,  //竖向滚动click:true  //滚动区域可触发点击事件});});}
};
</script>
<style lang="scss" scoped>
.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%;}}}
}
</style>

vue+better-scroll实现类似京东的分类列表相关推荐

小程序完美实现仿京东商城分类列表
做小程序也有一段时间了,现在将一个仿京东分类列表的源码分享给大家, 先看效果图: 下载地址
基于Vue实现的多条件筛选功能(类似京东和淘宝功能)
基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选.清空.全选功能,数据源是通过JSon格式的数据封装而成. 实现的效果图: 代码实现如下: html: <div id='app ...
使用Jsoup抓取京东图书分类页面图书信息
一.目的: 1.任务使用 Jsoup抓取京东图书分类页面的图书信息. 抓取目标分类网址例如:https://list.jd.com/list.html?cat=1713,3259,3330 给与的某 ...
[RN] React Native 实现类似京东的沉浸式状态栏和搜索栏
React Native 实现类似京东的沉浸式状态栏和搜索栏其原理其实就是在要隐藏部分的那个View 前面加入 StatusBar 代码! 代码如下: <StatusBaranima ...
仿京东App分类页面的实现
今天群里有人问了关于仿京东App分类页面的实现,而我之前正好查过这方面的资料,手上正好有一个demo,正好分享给大家看看,个人觉得效果棒棒哒! 首先来看效果图吧是不是很6呢,来分析这个demo的主体 ...
类似京东商城客户端应用iOS源码
IOS商城,电商开源APP,类似京东商城,天猫商城,淘宝,去年开发的一个项目,现在把它分享出来.服务端是java 商城,对应项目是Shop-for-JavaWeb1.App使用MVC框架完成开发.2. ...
elasticsearch实现类似京东的商品搜索效果（elasticsearch动态聚合）
用到京东的对其搜索应该不会陌生,其搜索也是使用elasticsearch完成的,下图为一个搜索效果图: 搜索筛选条件会根据查询返回的结果动态变化,要实现这个功能就要用到elasticsearch的聚合 ...
ecshop小京东首页分类楼层左侧广告修改方法
用了以ecshop为内核的小京东5.0,在设置首页楼层分类的时候,是不是发现这样一个怪象:在后台模板设置里修改了楼层的分类后发现这个楼层左侧的广告不见了!代而显示的是一张"暂无广告" ...
【Android】App首页上下滚动快报控件通知控件类似京东快报控件（一）
前言快过年了,对于大伙来说手头上的事情做完没有呢,马上也该让自己轻松一阵子了,哈哈哈.好,说正事,由于公司App这个版本首页的改版,新增了很多新的控件,类似于京东快报这种控件的话我在写之前也去找了一 ...

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

效果图和目录结构

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

2、router.js

3、App.vue

4、tabbar.vue

5、class.vue

vue+better-scroll实现类似京东的分类列表相关推荐

最新文章

热门文章