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 相关文章推荐
Js 随机数产生6位数字
May 13 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python如何对齐字符串
2020/07/30 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
企划专员岗位职责
2013/12/09 职场文书
学习党章思想汇报
2014/01/07 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
出差报告格式模板
2014/11/06 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
教你使用TensorFlow2识别验证码
2021/06/11 Python
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android