![](https://img-blog.csdnimg.cn/20191218104029734.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
大前端
node、js,h5,sass,less,小程序,vue
冷子夜
渭城朝雨浥轻尘,客舍青青柳色新
展开
-
Uniapp小程序web-view嵌套H5环境,如何实现H5页面生成的图片在小程序端下载
【代码】Uniapp小程序web-view嵌套H5环境,如何实现H5页面生成的图片在小程序端下载。原创 2024-05-27 17:06:18 · 240 阅读 · 0 评论 -
聊天列表自动滚动到底部
通过js控制让聊天列表自动滚动到底部,原创 2022-07-29 11:22:05 · 601 阅读 · 0 评论 -
Vue计时器和倒计时组件
Vue计时器组件和倒计时组件,二合一。原创 2022-07-26 16:26:23 · 962 阅读 · 2 评论 -
iconfont svg图标引用后不能用fill更改颜色的解决方法
用iconfont自带的批量去色功能解决今天在使用 Symbol 代码引用图标时发现,设置颜色后,有一部分图标还是显示原始的颜色。原来这部分 svg图标带有 fill 属性,这种图标不能本地修改 fill 属性,需要在项目中移除默认颜色。...原创 2021-01-27 17:21:25 · 4214 阅读 · 0 评论 -
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
个别代码可能不理解,请回复我参考文章 let series = [ { x: 1, y: 0 }, { x: 2, y: 0 }, { x: 3, y: 1 }, { x: 4, y: 1.3 }, { x: 5, y: 1 }, { x: 6, y: 0 }, { x: 7, y: 0 }, { x: 8, y: 0 }, { x: 9, y: 0 },原创 2020-12-14 14:21:13 · 454 阅读 · 1 评论 -
小程序防抖和节流
```handlebarsasdsadas```## 标题saasdasd## 标题aasdasdsa原创 2020-12-14 14:13:26 · 558 阅读 · 0 评论 -
Canvas连续切换绘制虚线和实线
待定原创 2020-12-14 14:06:37 · 752 阅读 · 0 评论 -
微信小程序全局设置分享内容,适配Page构造器和Component构造器
// Page构成器 设置全局默认分享!(function () { var PageTmp = Page Page = function (pageConfig) { pageConfig = Object.assign( { onShareAppMessage: function () { let app = getApp() const sharedata = { title: '分享标题',原创 2020-12-10 02:54:00 · 720 阅读 · 0 评论 -
Vue利用visibilitychange监听页面显示和隐藏
mounted() { document.addEventListener('visibilitychange', _this.handleVisiable) }, destroyed() { document.removeEventListener('visibilitychange', _this.handleVisiable) }, methods: { handleVisiable(e) { if (e.target.visibilityState原创 2020-12-04 15:55:34 · 8186 阅读 · 0 评论 -
前端tab界面数据缓存和预加载思路
效果点击第5周。缓存第5周数据,并预加载第4、6周数据。继续点击第6周,读取第6周缓存数据,第5周数据已缓存,所以只预加载第7周数据。点击第1周。缓存第1周,预加载第2周,第0周不加载。代码<script>export default { data() { return { dataInit: false } }, methods: { /** * 加载数据 * @param String week 加载指定周.原创 2020-12-01 18:01:36 · 670 阅读 · 0 评论 -
vue实现带文字switch切换简化版
效果<template> <div class="toggle-button-wrapper"> <input type="checkbox" id="toggle-button" name="switch" :checked="checked" v-on="listeners" @change="onChange" /> <label for="toggle-button" class="button-label"> &转载 2020-11-11 17:17:24 · 1599 阅读 · 0 评论 -
switch开关组件Vue
效果代码<template> <div class="SwitchCp"> <label role="checkbox" :class="['switch', { value }]"> <input type="checkbox" class="switch-input" @change="toggle" /> <div class="switch-core" :style="{ backgroundColor原创 2020-11-11 17:06:01 · 934 阅读 · 0 评论 -
vue项目中滚动到某元素位置,使用scrollIntoView()
1.使用a标签+#号<a href="#box1">我跳到box1</a>上面这一种的缺点是,url会发生改变,会在url最后面加上片段识别符#box2,这样就改变了URL的路径,这是我们不想看到的。因为再次刷新的时候回出现问题。当使用 vue-router回退时,发现需要回退很多次。2.scrollTop滚动到某位置document.documentElement.scrollTop=380;//不需要加单位直接这句就可以实现滚动到某位置3.scrollIntoVi原创 2020-10-30 11:22:39 · 3091 阅读 · 0 评论 -
Vue 三种带文字分割线实现方式
第一种利用::before 和 ::after实现 <div class="not_has_more"> 常用品牌 </div> .not_has_more { margin: 40px 0; line-height: 50px; text-align: center; position: relative; height: 33px; font-size: 24px; font-family: .原创 2020-10-22 11:12:59 · 6685 阅读 · 0 评论 -
html2canvas应用问题概览
问题1使用以下省略文本样式,会绘制不出来 white-space: normal; /** 不能设置为这个 white-space:nowrap; 这个意思为不换行 **/ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排原创 2020-10-10 14:43:15 · 405 阅读 · 0 评论 -
解决iOS上vue for循环中,删除带有absolute定位的元素,absolute元素没被删除
问题截图问题代码 <div class="list flex"> <div v-for="(v, idx) in allergyList" class="item flex" :key="idx"> {{ foreStamp['allergy'] }}{{ v }} <img @click="add('allergy', v)" src="../assets/images/my_food/add.png" alt="" /> <原创 2020-10-10 14:25:03 · 219 阅读 · 1 评论 -
引入Vant组件并改变其样式
在加了scoped的style中重写样式 失效,因此另加一个不带scoped 的 style即可<style lang="scss">.main_page_process { //vant 组件类名 .van-progress__portion { box-shadow: 0px 6px 12px 0px rgba(255, 102, 102, 0.5) !important; }}.baby_desc_swiper { //vant 组件类名 .van-swip原创 2020-08-14 16:57:14 · 1864 阅读 · 0 评论 -
低端机position fixed 绝对定位不显示
修复用元素滚动替代界面滚动#page { width: 100vw; height: 100vh; overflow-y: scroll; overflow-x: hidden;}原创 2020-08-13 18:34:24 · 377 阅读 · 0 评论 -
利用mask-image实现图片显示部分进度
效果图code<html> <header> <style> .demo { position: relative; } .icon { width: 100px; } .icon2 { position: absolute; left: 0; top: 0; width: 100px;原创 2020-08-07 18:19:11 · 397 阅读 · 0 评论 -
如何v-html 内的元素加样式
使用 ::v-deephtml<div id="rich_text" v-html="content" class="desc content"></div>CSS #rich_text { ::v-deep p { margin: 32px 32px 0; font-size: 28px; font-family: PingFangSC-Regular, PingFang SC; font-weight:原创 2020-08-03 14:14:55 · 649 阅读 · 0 评论 -
Vue-元素曝光(判断元素是否在可视区域内)(一)
IntersectionObserver介绍intersection-observer npm包实际运用原创 2020-07-24 20:19:53 · 4434 阅读 · 0 评论 -
Vue-元素曝光(判断元素是否在可视区域内)(二)
IntersectionObserver介绍intersection-observer npm包实际运用原创 2020-07-24 20:18:37 · 4501 阅读 · 4 评论 -
Access-Control-Allow-Origin‘ header in the response must not be the wildcard ‘*‘ when the request‘s
报错Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.原因:后台不能使用通配符 ‘*’,否则前端报错;请求的origin和后台设置的origin不一致。解决方案:(1)前端代码不用动。后台 为‘Access-Control-Allow-Origin’设置动态的ori原创 2020-07-23 17:57:18 · 5947 阅读 · 2 评论 -
swiper轮播图在vue中实现显示3张图片,一个完整的两边显示一半
这里是引用https://blog.csdn.net/weixin_44237806/article/details/100141698安装 yarn add swiper vue-awesome-swiper引用局部引用import Swiper from 'swiper/swiper-bundle.min.js'import 'swiper/swiper-bundle.min.css'swiper效果图,图片路径自己更改吧这个<template> <.转载 2020-07-20 14:46:04 · 5389 阅读 · 6 评论 -
vue 父子元素都有滚动,父子元素各自滚动,相互不影响
<div class="menus" @touchmove.stop></div>原创 2020-07-02 16:22:05 · 1872 阅读 · 0 评论 -
input输入框在ios中光标及字体不居中
如何解决input输入框在ios中光标及字体不居中的问题;问题根本:不要使用line-height垂直居中。解决方法:可直接定义height,然后高度由上下padding值撑开。input { font-size: 1.6rem; height: 1.6rem; padding: 1rem 0;}这里是引用章鱼不丸子:http://blog.csdn.net/yuki_haha/article/details/72639786的博客...原创 2020-06-29 09:52:30 · 1072 阅读 · 0 评论 -
JS替换自定义表情图片代码
我们经常在前端需要处理这种含有表情符号的文本‘[微笑][mulu讨厌]美女[色]你好[害羞][色]在吗[haha讨厌][sasa1231]?’一般情况,我都是放在后端做映射。今天,有个需求需要在前端做。大概理了下。在前端做个映射表配置。这个配置内容我在后端下发。配置文件想了两种形式。输出结果如下// 只处理了字母和汉字CCCCDDD美女BBB你好AAAABBB在吗DDD[sasa1231]?第一种,需要两次循环 var json = '[{"title":"微笑","src":1原创 2020-06-12 11:54:34 · 700 阅读 · 0 评论 -
用mask-image做弹幕阴影、歌词滚动阴影、加载进度
弹幕阴影,歌词滚动阴影加载进度(待完成)做弹幕阴影,歌词滚动阴影效果如下直接看代码 <div class="barrage" ref="barrage"> <div class="barrage_wrap"> <div class="bar_block" v-for="(item, index) in barrageList" :key="index"> <div class="barragediv.原创 2020-06-12 09:53:05 · 285 阅读 · 0 评论 -
CSS-BEM 命名规范
官网原创 2020-06-10 20:39:16 · 139 阅读 · 0 评论 -
package.json中库的版本号详解(^和~区别)
一般package.json依赖配置如下"dependencies": { "accepts": "~1.3.7", "array-flatten": "1.1.1", "body-parser": "^1.19.0", "content-disposition": ">0.5.3", "content-type": "~1.0.4", "cookie": "^0.4.0", "cookie-signature": "<1.0.6",原创 2020-06-10 20:32:08 · 3725 阅读 · 0 评论 -
js列表每隔n个插入一个广告(循环展示广告数组中的广告)
适用于小程序wxs和jsindex 本条数据索引ad 广告数组field 所要返回的广告字段const isDisplayAd = function(index, ad, field = '') { var perShow = 4 // 每隔n个显示广告 var adLength = ad.length if (adLength > 0){ if ((in...原创 2020-04-11 15:27:35 · 1545 阅读 · 2 评论 -
vue2.0的计算属性computed和watch有什么区别?说说各自使用场景
一个属性由多个属性计算而来时,使用计算属性;如订单总价一个属性值变化影响多个属性、方法,使用属性监听;如关键词搜索1 computed:通过属性计算而得来的属性1 computed内部的函数在调用时不加()2、computed是依赖vm中data的属性变化而变化的,当data中的属性发生改变的时候,当前函数才会执行,data中的属性没有改变的时候,当前函数不会执行。3、comput...原创 2019-12-31 09:36:18 · 952 阅读 · 0 评论 -
微信浏览器如何用真机调试H5应用
在移动端实际开发中,还是会碰到一些棘手的bug,想看看到底哪里出了问题,苦于移动端不能F12啊。友好的微信给我们提供了这么一个入口,使开发者可以真机调试。给微信开发者点赞。然后就可以看到你打印的内容及其他的信息,比如cookie、LocalStorage,Network、Element……微信打开这个网址 http://debugx5.qq.com。进去后,选择中间 信息,然后一直往下翻,把 ...原创 2019-12-28 13:44:17 · 1364 阅读 · 0 评论