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


Posted in Javascript onJune 30, 2020

本文实例为大家分享了vue基于better-scroll仿京东分类列表的具体代码,供大家参考,具体内容如下

效果图目录结构

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

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

<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.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 #Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 #Javascript
Postman动态获取返回值过程详解
Jun 30 #Javascript
JS简易计算器实例讲解
Jun 30 #Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 #Javascript
JSON获取属性值方法代码实例
Jun 30 #Javascript
JS猜数字游戏实例讲解
Jun 30 #Javascript
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
javascript数组去重小结
2016/03/07 Javascript
js表单验证实例讲解
2016/03/31 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
出售房屋委托书范本
2014/09/24 职场文书
初中优秀学生评语
2014/12/29 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
新闻报道稿范文
2015/07/23 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
初中毕业生感言
2015/07/31 职场文书
高一化学教学反思
2016/02/22 职场文书