![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue移动端
小小liang
一个在深圳捡破烂的前端
展开
-
vue 项目在手机上调试
vue 项目在手机上调试cmd,打开自己电脑终端,输入ipconfig,就能看到自己电脑的ip地址了vue.config.js文件module.exports = { devServer: { host: '192.168.1.6', // 将浏览地址的本地服务修改为本机ip地址,用来到手机上测试 port: 8080, //端口号 },}然后项目启动的时候,直接访问:Network: http://10.0.XXX/原创 2021-01-08 17:36:28 · 481 阅读 · 0 评论 -
vue 之 商品列表的左右联动
目录vue 之 商品列表的左右联动思路实现代码vue 之 商品列表的左右联动思路1:初始化的时候,左右两侧实现 可以滚动监听右侧的滚动事件,把具体的滚动y轴的值,赋值给 scrollY2:然后计算出右侧的每一个板块的距离顶部高度,为一个高度数组3:计算属性之中,设置当前高亮 返回当前索引需要找到当前索引,然后根据这个高度数组,和scrollY进行比较,需要返回那个索引4:点击左侧切换的时候,拿当前的索引号,然后再拿到右侧的滚动位置,赋值给scrollY,最后调用右侧的滚动事件原创 2020-12-19 16:36:42 · 2135 阅读 · 3 评论 -
vue + axios + vuex 封装请求
目录vue + axios + vuex 封装请求axios封装请求 post get等vuex 结合 axios的封装第一步:api / index.js 请求方法第二步:store / state.js第三步:store / actions.js第四步:store / mutation-type.js第五步:store / mutations.js第六步:在组件之中使用vue + axios + vuex 封装请求安装:npm i axiosaxios封装请求 post get等api原创 2020-12-05 21:25:10 · 535 阅读 · 0 评论 -
vue之loading组件
目录vue之loading组件组件1组件2vue之loading组件转载于:链接: link.转载于:链接: link.组件1//loading效果组件<template><div class="loadEffect" :style="{marginTop: marginTop? marginTop : '50%'}"> <span class="ld-span"></span> <span class="ld-spa原创 2020-12-03 14:06:16 · 325 阅读 · 0 评论 -
vue 之 左右滑动,底下滚动条跟随
手指拖着往左走,那么下面的小红条就应该往右走!上面手指拖着往左走的距离 / 下面小红条向走走的距离 = 上面总 / 下面总原创 2020-11-29 15:36:39 · 1852 阅读 · 3 评论 -
vue 之scss的使用
目录vue 之scss的使用mixin提取公共样式vue 之scss的使用mixin提取公共样式注意点:就是当前文件的样式,需要在当前文件中定义这个 mixin函数//修改表格的样式@mixin table-width($width) { ::v-deep .table_header { & > div:nth-child(1) { width: $width; } } ::v-deep .table_body_item { &am原创 2020-11-27 08:54:37 · 163 阅读 · 0 评论 -
vue 之封装一个简单的tabs组件
目录vue 之封装一个简单的tabs组件vue 之封装一个简单的tabs组件<!-- Tabs标签页 --><template> <div class="tabs_wrapt"> <div v-for="(item,index) in titles" :key="item" @click="itemClcik(index)" :class="active === index ? 'active':原创 2020-11-23 21:14:13 · 625 阅读 · 0 评论 -
vue 之图片懒加载(vue-lazyload插件) && fastClick减少移动端300ms点击事件
目录vue 之图片懒加载(vue-lazyload插件)fastClick减少移动端300ms点击事件vue 之图片懒加载(vue-lazyload插件)官网:https://github.com/hilongjw/vue-lazyload安装:npm i vue-lazyload -S使用:main.js// 使用图片懒加载插件import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)home.vue等组件中使用图片懒加载,需要原创 2020-11-17 21:43:38 · 151 阅读 · 0 评论 -
vue脚手架之服务器代理
目录vue脚手架之服务器代理vue.config.jshttp.js借鉴于:链接: link.vue脚手架之服务器代理vue.config.jsmodule.exports = { // 服务器设置 devServer: { port: 9999, host: '0.0.0.0', contentBase: './dist', compress: true, historyApiFallback: true, disableHostCheck: true, //原创 2020-11-17 14:00:38 · 310 阅读 · 0 评论 -
vue 之 Toast插件的封装
目录vue 之 Toast插件的封装vue 之 Toast插件的封装原创 2020-11-16 22:59:33 · 367 阅读 · 0 评论 -
vue之 点击标题滚动到对应位置 + 滚动影响上面的高亮
目录vue之 点击标题滚动到对应位置 + 滚动影响上面的高亮NavBar.vueHome.vuevue之 点击标题滚动到对应位置 + 滚动影响上面的高亮NavBar.vue<template> <div class="nav_bar"> <div class="left"> <slot name="left">left</slot> </div> <div class="cente原创 2020-11-16 22:04:42 · 1708 阅读 · 1 评论 -
vue 之返回顶部组件
vue 之返回顶部组件backTop.vue<template> <div class="floating" @click="goTop()" v-show="btnFlag"> <a href="javascript:;"> <em class="icon-text">回顶部</em> </a> </div></template><script>expo原创 2020-11-16 15:25:03 · 341 阅读 · 0 评论 -
vue 之移动端隐藏滚动条
vue 之移动端隐藏滚动条转载于 链接: link.html,body{ width: 100%; height: 100%; overflow: scroll;}html::-webkit-scrollbar, body::-webkit-scrollbar{width:0px;height:0px;}body{margin:0;}这样移动端右侧默认滚动条就隐藏了。如果只是隐藏某个标签内出现的滚动条单独给予样式::-webkit-scrollbar{width:0px}即可,不用设置上述样式。原创 2020-11-16 13:49:15 · 2629 阅读 · 1 评论 -
vue 之字体小于12px设置
& > div:nth-child(1) { position: relative; font-family: PingFangSC-Regular; color: #666666; letter-spacing: -0.24px; text-align: left; width: 30px; span { position: absolute; left: -15px; top: -5px;原创 2020-11-16 08:45:40 · 4294 阅读 · 0 评论 -
vue之better-scroll封装滚动
目录vue之better-scroll封装vue之better-scroll封装简单的滚动引用这个滚动组件 BScroll .vuevue之better-scroll封装返回顶部scroll.vue组件backTop.vuehome.vue解决better_scroll 滚动问题vue之better-scroll封装 实现上拉加载更多vue之better-scroll封装下载安装:npm i better-scroll --savevue之better-scroll封装简单的滚动创建一原创 2020-11-15 23:04:24 · 181 阅读 · 0 评论 -
vue 之 tab + list 组件实现点击tab显示对应的tab栏目数据
目录vue 之 tab + list 上拉加载功能实现tab组件list组件之vantvue 之 tab + list 上拉加载功能实现tab组件list组件之vant原创 2020-11-14 10:05:09 · 1812 阅读 · 0 评论 -
vue 之 背景图片和public引入问题
目录vue 之 背景图片引入问题vue 之 背景图片引入问题~@的意思: @是webpack设置的路径名,代表的是src目录,可以在build / webpack.base.conf.js更改设置在这里插入图片描述~ 是相对于下面的文件路径的意思background-image: url("~@/assets/image/mobile/bg.png");background-size: 100% 100%;...原创 2020-11-12 17:01:47 · 3893 阅读 · 0 评论 -
vue项目 配置之.editorconfig文件配置
目录项目配置之.editorconfig文件配置项目配置之.editorconfig文件配置在根目录下创建 .editorconfig 文件# 告诉EditorConfig插件,这是根文件,不用继续往上查找root = true# 匹配全部文件[*]# 设置字符集charset = utf-8# 缩进风格,可选"space"、"tab"indent_style = tab# 缩进的空格数indent_size = 2# 结尾换行符,可选"lf"、"cr"、"crlf"原创 2020-11-11 21:15:22 · 1363 阅读 · 0 评论 -
vue之评论
目录评论组件 artical.vue评论头部组件 CommentTitle.vue评论组件 Comment.vue二级评论组件 ComemntChild.vue评论组件 artical.vue功能:先获取用户信息获取文章 数据获取评论数据发表评论发表评论后,调用子组件中的 获取最新评论方法点击回复 拿到父评论的id 并且给评论的数据对象,添加父评论的id点击回复的 时候 输入框聚焦 需要使用 ref 拿到子组件的节点 然后调用子组件中的 input表单节点下 使用focus方原创 2020-10-19 21:18:01 · 931 阅读 · 0 评论 -
vue之首页的分类与上拉加载更多
目录首页的分类Home.vueArticalDetail.vue首页的分类功能:1:一开始先获取到 tab 菜单的数据001 然后定义一个方法,对里面的 tab 中的 item每一项数据操作,添加list(数据),还有page等002 然后获取每一项 根据当前item的id 发起请求 获取到item的数据 用于渲染数据003 002之中需要 拿到 当前 tab中的item选中的 拿到当前item,也就是需要点击的时候,监听active的变化去实现的!2:上拉加载更多001:先原创 2020-10-18 21:48:05 · 338 阅读 · 0 评论 -
vue之个人中心编辑
目录editItem.vue的封装UserEdit.vueeditItem.vue的封装这是修改个人中心中的 个人详情的组件封装左侧 与 右侧左侧需要从父组件 传递值过来右侧需要从父组件 传递值过来 还有可以使用插槽的方式替换<template> <div> <div class="edit-item" @click="itemClcik"> <span>{{ left }}</span>原创 2020-10-17 22:24:19 · 4877 阅读 · 2 评论 -
vue-cli 3x 配置 => 给路径起一个别名
目录vue-cli 3x 配置 => 给路径起一个别名上面给 src 和 src/components 等起了一个别名,那么在项目之中引用即可vue-cli 3x 配置 => 给路径起一个别名在根目录下创建vue.config.jsvar path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: confi原创 2020-09-03 22:16:42 · 243 阅读 · 1 评论 -
vue项目之购物流程
目录vue 项目之购物流程首页商品展示商品详情页vuex中的数据vue 项目之购物流程首页商品展示使用宫格组件,实现首页商品的两列展示https://vant-contrib.gitee.io/vant/#/zh-CN/grid属性介绍column-num 展示的列数@click="gotoDetails(value._id)" 点击去往详情页一般来说,在created钩子函数之中,获取到商品数据,因为这时候的数据是已经初始化好了然后把这些数据,存储在data之中,用于列表原创 2020-10-14 20:12:59 · 556 阅读 · 0 评论 -
03封装请求
目录封装请求封装请求安装:npm i axios原创 2020-10-11 20:31:59 · 105 阅读 · 0 评论 -
04登录的实现
目录登录的实现登录的实现导航栏输入框按钮表单使用van-form包裹表单项,并且绑定事件呢当表单提交的时候回触发 submit事件在api文件下 封装对应的请求模块api / user.js原创 2020-10-11 20:30:30 · 79 阅读 · 0 评论 -
vue 之配置路由 和 layout布局
目录配置路由router/index.jslayout/index.js配置路由router/index.js基础的路由配置还有登录权限的配置import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{ path: "/login", name: "Login", component: () => import("../views/login/L原创 2020-10-11 14:47:42 · 12693 阅读 · 0 评论 -
项目构建与vant按需引入与适配
目录项目初始化目录结构添加的东西vant按需导入项目初始化一、项目初始化更新日期:2020-05-11 19:36:21使用 Vue CLI 创建项目如果你还没有安装 VueCLI,请执行下面的命令安装或是升级:npm install --global @vue/cli在命令行中输入以下命令创建 Vue 项目:vue create toutiao-mVue CLI v4.3.1? Please pick a preset:default (babel, eslint)Manuall原创 2020-10-11 09:42:34 · 971 阅读 · 0 评论