Nick.Ding-CSDN博客

原创 vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置

【代码】vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置。

2023-07-07 18:25:48 836

原创使用element 中的el-scrollbar组件取代浏览器滚动条时遇到问题

之后又发现了新的问题，切换页面时滚动条无法回到页面顶部了，永远是上个页面滚动的位置；以上就是在整个浏览器中使用组件所遇到的问题，记录一下。事实上下面还有很多内容，所以滚动条高度肯定是不对的；可以看到页面滚动条就变正常了；

2023-06-06 10:22:58 619

总结一些经常需要用到的获取时间脚本// 获取当天getCurrentDate() { const date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); month = month > 9 ? month : '0' + month; day = day > 9 ? day : '0' + day; return `$

2021-12-17 12:23:07 99

原创微信小程序通过wx.chooseMessageFile方法导入配置文件的内容

接到一个需求，要做文件的导入，查了一下发现微信小程序有个wx.chooseMessageFile方法，可以从聊天里面选择文件做导入，而我的需求就是拿到文件，将里面的内容读取出来直接显示在页面上。具体操作如下：// 导入configImport() { const _this = this wx.chooseMessageFile({ // 使用微信的方法进入聊天界面选择你之前接受过的文件 count: 1, // 最多可以选择的文件个数，可以 0～100 type: 'all', //

2021-11-03 12:11:40 3732

原创解决element中动态切换时间日期选择器时下拉框偏移到左上角的问题

正常第一次点击没有问题点击切换按钮后，直接偏到姥姥家去了~解决办法是只需在组件中加个Key="xxx"即可记录一下这个坑！

2021-09-15 10:45:43 789 2

原创 vue PC端微信扫码登录

我用的element，要是在弹窗里面使用，还是用自定义弹窗比较好，据说用官方的el-dialog会出不来。上代码：在index.html页面里面引入对应的脚本<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>只需要在弹窗里面给一个装二维码的div就好了，即（login_container）用来显示动态生成的二维码<template>

2021-09-13 14:41:11 1748

原创 vue项目中使用公共自定义导航组件需要跳转对应页面并且目标页面的效果可能会不同

有时候需要跳转的目标页面需要有锚链接效果，有的时候需要根据参数跳转等，先上代码。组件里面的代码根据需求来就行，主要是对应跳转的目标页面<template> <ul class="header-nav"> <li class="menu-item" v-for="(item, index) in navList" :key="index" :class="{'active-nav':$route.name === item.name}" @click="handleN

2021-09-13 12:51:05 295

原创路由点击的小问题

解决点击路由时让页面置顶（在未自定义滚动条时有效）router.beforeEach((to, from, next) => { // 解决点击路由时页面置顶（未自定义滚动条时有效） // chrome document.body.scrollTop = 0; // firefox document.documentElement.scrollTop = 0; // safari window.pageYOffset = 0; next

2021-09-13 12:11:57 51

原创纯CSS做优惠劵

随便做个示例，防止下次需要用到：.coupon { width: 600px; height: 200px; position: relative; background: radial-gradient(circle at right top, transparent 20px, #28A4F2 0) top left / 200px 51% no-repeat, radial-gradient(circle at

2021-05-27 18:45:59 44

原创 uniapp做小程序分包

背景：用uniapp开发小程序时会遇到文件夹资源过大（一般是2M以上）导致无法预览的问题，因此就需要配置分包规则；话不多说，直接上代码：先在根目录下面建立几个需要做分包的文件夹，如：打开pages.json这个文件，一般情况会有四个主页面，如："pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } },

2021-05-17 10:43:30 420 1

原创 js前端判断登录超时即清除登录状态

产品要求用户登录后当关闭页面重新访问时需要保持登录状态，并且在一个月后清除登录状态重新登录。由于请求头没有使用token来判断是否登录超时，因此就在前端简单的做了一个判断，代码如下：首先若登录成功就做个本地缓存的时间戳const timestamp = String(new Date().getTime());localStorage.setItem("loginTimestamp", timestamp);然后获取缓存里的时间戳并加上30天的时间戳与当前时间进行比较getDaysTimesta

2021-04-21 15:50:12 1394

原创移动端实现像PC端hover状态的几种办法

之前做的移动端页面时都没有考虑到交互体验问题，所用想加个hover状态，但移动端没有鼠标，因此只能用别的方式，如下：1. 用css中的伪类:active实现button { background-color: blue; &:active { background-color: green; }}这种方式很方便，也比较容易处理，但是这样做会有兼容性问题，在ios端失效；因此可以做个兼容，在代码中加上如下代码即可：document.body.addEventListen

2021-04-20 11:58:45 2828

原创根据标签自身属性重新整理了一下reset css，方便后面开发时使用

1. 真正需要重置的标签也就下面这些，其它的直接用默认属性即可，完全没必要重置。html, body { min-height: 100vh;}body, p, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, pre, hr, fieldset, figure, menu { margin: 0;}ul, ol, th, td, button, input, textarea, menu { padding: 0;}ul { list-style-

2021-04-16 18:22:23 66

原创根据手机品牌判断进入对应的应用市场下载App的方法

话不多说直接上代码：function openApp() { const u = navigator.userAgent; // ios if (u.match(/(iPhone|iPod|iPad);?/i)) { window.location.href = "XXXX"; } // Android if (u.match(/android/i)) { window.location.href = "XXXXXXXXX"; // 安卓协议，由安卓开发那边提供（打

2021-04-16 12:12:18 648 2

原创 4月份，微信改变了微信授权获取用户昵称等信息的获取方式接口（uni-app）

1. 接口改变用户授权后直接就能获取到对应的信息代码示例如下：<button class="submit-btn" type="primary" open-type="getUserInfo" withCredentials="true" @getuserinfo="wxGetUserInfo">微信授权</button>// 对应的方法wxGetUserInfo(e) { console.log(e.detail)}2. 但是这样感觉体验不好，想要它还是出现对

2021-04-14 12:38:13 538 1

原创在uniapp项目中使用腾讯地图计算用户到目的地的距离

在uniapp项目中使用腾讯地图计算用户到目的地的距离1.需先有腾讯地图秘钥（获取的过程忽略）代码如下（示例）：<script>import QQMapWX from '@/common/js/qqmap-wx-jssdk.min.js';export default { data () { return { distance: '0', } }, onLoad() { this.handleCalculateDistance() },

2021-04-14 12:16:47 812 2

NICKDL的博客

原创收集一些常用的工具函数