- 博客(45)
- 收藏
- 关注
RSS订阅转载 JS将时间戳转换为刚刚、N分钟前、今天几点几分、昨天几点几分等表示法
使用Javascript语言，将时间戳转换为类似新浪微博的时间的表示方法。 要求转换规则： 1分钟以内显示为：刚刚 1小时以内显示为：N分钟前 当天以内显示为：今天 N点N分（如：今天 22:33） 昨天时间显示为：昨天 N点N分（如：昨天 10:15） 当年以内显示为：N月N日 N点N分（如：02月03日 09:33） 今年以前显示为：N年N月N日 N点N分（如：2000年09月18日 15:59）
2022-08-24 11:05:52
1202
原创 项目中遇到过的问题及解决方案（持续更新中）
1、弹框点击确定，冒泡到下一层解决：设置弹框的层级index:99992、v-if切换组件不更新原因：可能原因是Vue识别到是相似组件（高度相似甚至相同）不会更新元素。解决：给俩个高度相似的组件分别加上不同的key值让Vue识别为不同的组件。（我是用的时间戳来区分的）。此处应了解vue元素渲染，Key值的重要性。3、input输入框active状态显示黑色边框解决：4、vue绑定键盘事件不起作用。解决：...
2022-06-27 17:32:45
249
原创 前端面试常问的题目（持续更新中）
1、闭包问题什么是闭包？答：“闭包就是能够读取其他函数内部变量的函数造成闭包的原因？答：解决方法？答：可以使用let、立即执行函数闭包可以实现什么？可以访问局部变量、可以保护变量不受污染2、ajax、axios 前后端通信的过程（原生的ajax怎么写）原生ajax请求步骤get：1.创建核心的对象（new xhrhttprequest对象）2.编写回调函数（判断是否请求成功 状态码等于4或者等于200）3.调用open方法 设置请求方式和请求路径4.调用send方法 发送post：要多设
2022-06-27 17:32:16
15328
原创 postcss.config.js配置解决vant在移动端上会变小的问题
postcss.config.js配置解决vant在移动端上会变小的问题
2022-06-22 10:22:20
902
原创 小程序开发选择收货地址的交互实现
1、用户到了确认订单页面，首页通过接口将用户已经有填写的默认地址先过滤出来并展示出来，如果没有地址则显示去新增地址按钮。此方法是用户选了某个地址回传过来的对象2、跳转到地址列表，在onShow钩子里将数据请求回来，在onShow里调的好处就是为了修改地址后回到地址列表页面，可以重新执行请求，拿到最新修改的地址数据。3、编辑地址4、选择某个地址5、去编辑后跳到编辑地址页面在onLoad中回显...
2022-06-09 15:13:35
897
原创 nuxtjs项目中配置环境变量
1、先下载cross-envnpm install cross-env然后在package.json中修改script配置 "scripts": { "dev": "cross-env NODE_ENV=dev nuxt --open ", "test": "cross-env NODE_ENV=test nuxt", "build": "cross-env NODE_ENV=pro nuxt build", "start": "cross-env NODE_E
2022-05-13 14:24:26
2579
2
原创 实现加入购物车的功能
在实际开发过程中，我们经常会有加入购物车的需求：实现步骤：在src下创建一个store文件夹在store文件夹里建一个store.js文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ modules:{}})export default store然后在main.js导入刚才建的storeimport store from '@/
2022-05-02 09:24:50
2066
2
原创 解决小程序rich-text渲染详情页面图片有间隙的问题
在开发中，我们会发现图片与图片之间有间隙此时我的解决方法是：将后端返回的数据为img标签添加style样式res.info = res.info.replace(/<img /g,'<img style="display:block" ')
2022-05-01 23:13:35
824
1
原创 小程序实现下拉刷新功能
onPullDownRefresh(){//重置一些数据this.page = 1this.total = 0this.isLoading = falsethis.list = []//然后再发起请求//传一个回调函数进去来关闭下拉刷新this.initData(())=>{uni.stopPullDownRefresh()}}这时我们就要改造一下initData方法：initData(cb){//请求完成之后cb && cb
2022-05-01 22:13:17
232
原创 小程序上拉分页加载更多数据功能
在开发过程序中，触底加载更多时，为了防止一直触底加载，这时我们应该加一个开关来控制。在data中加一个属性isLoading = false然后在接口发出请求后将开关打开：this.isLoading = true然后请求完毕之后再将开关关闭：this.isLoading = fals最重要的一步是在onRechbottom生命周期中要先做判断：onRechbottom（）{//如果开关是开启的，就证明正在加载数据，这时不应该再发起下一页请求。if(this.isLoad
2022-05-01 22:03:50
940
原创 基于vue-cli封装自己的ui组件库并上传到npm
一、在与src目录同级下新建一个packages文件夹，这个文件夹存储组件源码。然后在packages下新建一个index.js用于统一导出组件。假如我们现在要封装一个Button组件，此时应该在packages文件夹下新建一个button文件夹，用于存放button组件的源码。然后在button文件夹下新建一个index.js，用户导出button组件。然后在button文件夹下新建一个button.vue和button.less，用于写button组件的结构和样式的。button.vu
2022-04-20 17:18:28
1353
原创 Vue首屏加载速度优化，提升80%以上
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。可以看个例子：这是优化前的页面加载状态：执行npm run build打包项目，出来的vendeor.js文件，基本都是1M以上的的巨大文件，没有用户能忍受5s以上的loading而不关闭页面的，如图所示：当项目在挂载到服务器上，平均都是10S以上加载出来，好家伙这加载时间，仿佛过了半个世纪
2022-04-18 16:40:07
7957
原创 路由跳转记住滚动位置，返回时回到上次滚动位置
方法一： 利用Keep-Alive和监听器1.首先在路由中引入需要的模块{ path: ‘/home’, name: ‘home’, meta: { keepAlive: true // 需要缓存 }, component: resolve => { require([‘../view/scrollDemo.vue’], resolve) } }2.在App.vue中设置缓存组件<keep-alive> // 缓存组件跳转的页面 <rou
2022-04-18 13:38:47
1318
原创 vue中keep-alive的用法
在开发项目需求中，可以需要用户切换选项时，用户填写的数据回来时还需要显示，这时我们就要用keep-alive<keep-alive><router-view></router-view></keep-alive>这时如果我只想对Home组件进行缓存，其它组件不需要缓存<keep-alive include="Home"><router-view></router-view></keep-al
2022-04-08 16:49:00
551
原创 vue-router在项目中的使用
在开发中，路由器是前端实现单页应用最为重要的。安装vue-routernpm install vue-router@3,注意vue2的项目要使用3版本的，到了vue3项目中才使用4版本的。新建router文件夹新建index.jsimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)import Home from '@/pages/Home'import About from '@/
2022-04-07 10:53:37
723
原创 vuex在项目中的用法
首页要知道vue2项目中，要下载vuex为3.几的版本，而vue3项目要下载vuex为4.几的版本下载 npm install vuex@版本号新建一个store文件夹建一个index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const actions = { //对象的写法，此时的传参方式通过@click="changeVal('bbbbb')" ...mapActions({ .
2022-04-06 13:52:10
1135
原创 js判断两个数组是否相同
export const arraySame = (arr1, arr2) => { let flag = true; if (arr1.length !== arr2.length) { // 判断长度 return false; } arr1.some((el, index) => { // 判断元素 if (el !== arr2[index]) { flag = false; return true; }...
2022-03-31 11:36:19
498
原创 小程序登录操作校验是否登录
// 登录操作校验是否登录 checkLogin() { let that = this return new Promise((resolve, reject) => { //如果是小程序页面 || 有appid并且是微信浏览器 if(util.isMiniPg() || (that.globalData.appId && util.isWeiXinBrowser())){ const userInfo = uni.getSto.
2022-03-30 15:11:42
3178
2
原创 自定义修改小程序dot的样式
swiper.square-dot .wx-swiper-dot,swiper.square-dot .a-swiper-dot,swiper.square-dot .uni-swiper-dot { background-color: #ffffff; opacity: 0.4; width: 46upx; height: 2upx; margin: 0 0upx !important;}swiper.square-dot .wx-swiper-dot.w...
2022-03-28 15:18:40
425
原创 vue3.0中ref与reactive的区别
ref用来定义：基本类型数据。 ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。 ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。 reactive用来定义：对象或数组类型数据。 reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源代码内部的数据。 reactive定义的数据：操作数据与读取数据：均不需要.value。...
2022-03-25 13:40:02
225
原创 vue3.0中setup有几个注意点
它比beforeCreate和created这两个生命周期还要快，就是说，setup在beforeCreate,created前，它里面的this打印出来是undefined setup可以接受两个参数，第一个参数是props,也就是组件传值，第二个参数是context,上下文对象，context里面还有三个很重要的东西attrs，slots,emit，它们就相当于vue2里面的this.$attrs,this.$slots,this.$emit。...
2022-03-25 13:36:18
499
原创 beforeEach导航守卫实现登录跳转场景
在实际开发中，假如我们有home、login、list、detail页面。router.beforeEach(async (to,from,next)=>{ //假设此时用户已经登录并获取到了token并存在store中 //从store中拿到token const token = store.state.user.token const name = store.state.user.userInfo.name ...
2022-03-24 15:23:26
731
原创 解决子组件修改父组件传来的props值报错问题
报错提示：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "typeVal"解决方法：将props接收过来的值先在data里存起来，在v-model里绑定
2022-03-22 15:07:55
753
原创 hbuilderX 发行uniapp微信小程序报错[ app.json 文件内容错误] app.json: 未找到 [“sitemapLocation“] 对应的 sitemap.json 文件
解决办法在project.config.json增加代码："miniprogramRoot": "./unpackage/dist/dev/mp-weixin/",重新编译后再发行就可以解决问题。
2022-03-18 08:51:13
4921
5
原创 小程序在iponeX下安全区域的显示
在实际开发中，我们写的页面如果没有设置安全区域，则会在iponeX下有被遮挡。解决方法只需设置安全区域的样式即可：padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);...
2022-03-17 18:31:05
217
原创 小程序实现全屏展示页面滚动时出现透明由0到1显示
解决方案：将滚动的值/100，这个100值根据需求来调整，得出来的opacity赋值给样式中onPageScroll(e) { if(e.scrollTop<=100){ this.opacity = e.scrollTop/100 } }...
2022-03-16 09:13:20
845
原创 pc端复制链接功能
copyUrl(id){ const url = '/pages/goods/goods-detail/index?id='+id let domUrl = document.createElement("input"); domUrl.value = url; domUrl.id = "creatDom"; document.body.appendChild(domUrl);...
2022-03-11 09:30:11
291
原创 解决小程序用rich-text渲染图片会显示白色空隙的问题
html:<rich-text v-if="item.name=='img'" :id="item.attrs.id" class="_img" :style="''+handler.getStyle(item.attrs.style)" :nodes="handler.getNode(item,!lazyLoad||imgLoad)" :data-attrs="item.attrs" @tap="imgtap" @longpress="imglongtap" />...
2022-03-11 09:23:40
677
原创 小程序请求封装
const _URL = '';// 地址前缀const _FileURL = '';// 上传文件地址/** * 判断授权,并打开授权界面 * @param type 类型 参考于一下链接 * @param fun 授权完成之后调用的函数,(函数名称即可,不用带'()') * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html#scope-%E5%88%97%E8%A1%.
2022-03-04 09:42:38
226
原创 前端搭建vue项目的流程以及相关的封装
vue3.0项目搭建：一、环境配置1、在根目录下新建一个开发环境文件（.env.development）和一个生产环境文件（.env.production）.env.developmentNODE_ENV = 'development'//必须以VUE_APP_开头VUE_APP_ENV = 'development'====================================.env.productionNODE_ENV ='production'//必.
2022-03-04 09:39:29
365
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人