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验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
用js实现博客打赏功能
Oct 24 Javascript
微信小程序 video组件详解
Oct 25 Javascript
详解React-Todos入门例子
Nov 08 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
JS实现简单的表格增删
Jan 16 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
JavaScript实现消消乐的源代码
Jan 12 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
如何给phpadmin一个保护
2006/10/09 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
Nodejs模块载入运行原理
2018/02/23 NodeJs
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
angularjs http与后台交互的实现示例
2018/12/21 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python3转换code128条形码的方法
2019/04/17 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
html5时钟实现代码
2010/10/22 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
企业法人授权委托书范本
2014/09/23 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
员工辞职信范文
2015/03/02 职场文书
教育教学工作反思
2016/02/24 职场文书
大学生创业计划书
2019/06/24 职场文书