热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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



 

4、tabbar.vue



5、class.vue


关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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


推荐阅读
  • 使用Inno Setup将EXE与JRE封装为Windows安装程序
    本文详细介绍了如何利用Inno Setup工具将EXE文件及Java运行环境(JRE)整合为适用于Windows操作系统的安装程序。我们将提供必要的软件下载链接,并逐步指导您完成整个打包过程。 ... [详细]
  • KKCMS代码审计初探
    本文主要介绍了KKCMS的安装过程及其基本功能,重点分析了该系统中存在的验证码重用、SQL注入及XSS等安全问题。适合初学者作为入门指南。 ... [详细]
  • 基于函数实现的进制转换工具
    本文介绍了一种利用函数实现不同进制数(二进制、八进制、十进制)之间转换的方法。包括了程序的运行效果展示、所使用的主要函数解析、以及如何验证用户输入的合法性。整个项目仅使用了两个全局变量来存储用户的选项和输入的数值。 ... [详细]
  • 深度兴趣网络在点击率预测中的应用研究
    本文探讨了一种名为深度兴趣网络(Deep Interest Network, DIN)的新方法,该方法通过捕捉用户的历史行为和当前上下文之间的交互来提高点击率预测的准确性。DIN模型不仅考虑了用户的静态偏好,还动态地调整了对不同商品的兴趣权重,从而实现了更加个性化的推荐。 ... [详细]
  • Only2 Labs 是一家专注于视觉设计的工作室,如果您对当前的设计感到不满,或者急需寻找一个可靠的设计合作伙伴,甚至是您的团队项目需要专业指导,Only2 Labs 都将竭诚为您提供帮助。 ... [详细]
  • 本文探讨了HDU 4035的问题,涉及一个由n个房间组成的迷宫,这些房间通过n-1条隧道相互连接,形成一棵树结构。任务是从起点1号房间出发,计算到达出口所需经过的平均隧道数量,考虑了在每个房间中可能发生的三种情况及其相应概率。 ... [详细]
  • SQL注入实验:SqliLabs第38至45关解析
    本文深入探讨了SqliLabs项目中的第38至45关,重点讲解了堆叠注入(Stacked Queries)的应用技巧及防御策略。通过实际案例分析,帮助读者理解如何利用和防范此类SQL注入攻击。 ... [详细]
  • 本文提供了中国三大主要通信运营商(中国联通、中国电信和中国移动)的官方邮箱服务网站链接,帮助用户快速访问并管理个人邮件,同时介绍了如何设置短信提醒功能。 ... [详细]
  • Linux环境下Memcached安装指南
    本文详细介绍如何在Linux虚拟机上安装Memcached,包括必要的依赖库安装,以及使用Xshell进行文件传输的具体步骤。 ... [详细]
  • 本文旨在介绍Three.js的基础概念及其应用场景。Three.js是一个基于WebGL的JavaScript库,用于在网页上创建和显示3D图形。文中将从Canvas的基本功能出发,探讨其局限性,并引出WebGL及Three.js的解决方案。 ... [详细]
  • 使用Adobe Illustrator打造独特的家族徽章:牡鹿图腾设计教程
    本文详细介绍了一种基于《权力的游戏》灵感,运用Adobe Illustrator创作独特家族图腾——牡鹿徽章的方法。本教程不仅展示了具体的步骤,还提供了多种技巧,帮助读者创作出既具个人特色又符合设计原则的作品。 ... [详细]
  • 本文介绍了如何通过安装 VirtualBox 和 Vagrant 来快速搭建和管理虚拟机环境。我们将详细探讨如何选择合适的 Box 镜像,以及如何高效地下载、添加和管理这些镜像。 ... [详细]
  • HTML中用于创建表单的标签是什么
    本文将详细介绍HTML中用于创建表单的标签及其基本用法,包括表单的主要特性和常用的属性设置。如果您正在学习HTML或需要了解如何在网页中添加表单,这将是一个很好的起点。 ... [详细]
  • 解决fetch上传图片至微信公众号H5页面的问题
    在近期的一个项目需求中,需要在微信公众号内嵌入H5页面,并实现用户通过该页面上传图片的功能,包括拍摄新照片或从已有相册中选择。前端开发中采用了fetch API进行接口调用,但遇到了上传图片时数据无法正确传递的问题。 ... [详细]
  • 如何将Redis配置为后台服务
    本文介绍了在安装Redis后,如何通过修改配置文件使其以守护进程模式在后台运行,避免因控制台被占用而无法进行其他操作的问题。 ... [详细]
author-avatar
mobiledu2502873827
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有