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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
js字符编码函数区别分析
Dec 28 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php模板引擎技术简单实现
2016/03/15 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python中unittest用法实例
2014/09/25 Python
Python查询IP地址归属完整代码
2017/06/21 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
Django如何自定义分页
2018/09/25 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Python多分支if语句的使用
2020/09/03 Python
python温度转换华氏温度实现代码
2020/12/06 Python
python中remove函数的踩坑记录
2021/01/04 Python
函数指针的定义是什么
2016/08/14 面试题
2014高中生入党思想汇报范文
2014/09/13 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
1000字打架检讨书
2014/11/03 职场文书
工作保证书
2015/01/17 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
人口与计划生育责任书
2015/05/09 职场文书
争做文明公民倡议书
2019/06/24 职场文书