- 博客(39)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 使用van-dialog二次封装微信小程序模态框
由于微信小程序的wx.showModal不支持富文本内容，无法实现更灵活的展示效果，故需要进行二次封装。实现思路：使用van-dialog以及微信小程序的rich-text实现。本文仅提供一种思路，可能不是最优写法，欢迎大家讨论留言。
2023-09-26 16:13:49
867
原创 解决微信小程序不支持TextEncoder/TextDecoder对象
小程序里直接require()引入，全局就有TextEncoder / TextDecoder 了。这个库只支持utf-8编码，其他编码的话可以看看这个。或者使用NPM安装，安装方式见文档。方法一：使用兼容写法。
2023-09-08 16:18:55
5626
11
原创 【Echart Bug记录】z / z2 / zlevel of displayable is invalid, which may cause unexpected errors
使用echart遇到的bug，z / z2 / zlevel of displayable is invalid, which may cause unexpected errors
2022-07-19 10:42:24
4960
2
原创 微信小程序文字换行符
在微信小程序开发中有一个需求是展示长文本，后端返回的数据包含了\n\n如果将这段文字直接赋值这样并不会换行，具体解决办法如下
2022-06-24 16:02:43
9309
转载 如何在h5和小程序中适配iphone X全面屏底部的安全区
1、第一步： h5需要设置页面属性： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">2、在属性样式上加一段判断覆盖样式：.load-more { color: #0080ff; padding-bottom: 32px;}@supports (bottom: const
2022-04-21 15:57:43
2007
原创 vue vant上拉加载下拉刷新最佳实践
List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果。<div class='list'> <van-empty v-if="list.length === 0" description="暂无明细" /> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-mode.
2022-04-21 11:59:17
1879
原创 微信小程序实现扫二维码时仿微信扫码音效
需求分析：使用wx.scanCode时无交互感，对用户来说没有反馈，故增加扫码成功时震动及播放微信扫码音效// index.html<view bindtap="scanCode" class="equal-division-item flex-col items-center" hover-class="hover-class"> <view class="view"> <image src="http://xxx.xxx.com/app/xxx.png" cl.
2022-03-15 11:17:24
2061
原创 微信小程序实现js控制动画——点击播放动画
功能需求：点击刷新图标，图标旋转进入Loading状态，加载完毕，动画停止//index.wxml<view class="flex-col group_2"> <text decode="decode" class="text_1">{{userInfo.nickName}}</text> <view class="flex-row items-center section_1" hover-class="down_state" hover-stay-.
2022-03-15 11:03:14
3531
原创 小程序仿微信支付键盘实现
先上图2.实现过程键盘放在了vant-weapp组件的弹窗框popup中，并且默认进入页面自动弹出键盘index.wxml<van-popup show="{{ show }}" overlay="{{ false }}" position="bottom" bind:close="onClose"> <view class="flex-col keyboard"> <view class="flex-row"> &l.
2022-03-03 14:03:53
741
2
原创 Vue中Html2canvas生成网页局部截图
Html2canvas文档地址npm安装Html2canvasnpm install --save html2canvas项目文件引入Html2canvas（在哪使用就引入到哪）import html2canvas from 'html2canvas'使用（最后可生成png图片）<template> <Button class="ml-3" type="primary" icon="ios-cut"
2021-06-25 10:39:29
2936
原创 记录Safari浏览器兼容问题BUG
safari浏览器不支持yyyy-mm-dd这种日期格式，换成yyyy/mm/dd，就没问题。所以手动添加了一个方法转换一下日期格式就可以正常运行了function formatDate(time){ var date = new Date(Date.parse(time.replace(/-/g, “/”))); return date}...
2021-06-05 13:38:10
489
原创 前端还原设计稿记录
<script> window.onload = function() { /*375代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是 为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/ getRem(375, 100) }; window.onresize = function() { getRem(375, 100) }; fun..
2021-02-24 11:44:58
2482
原创 检测当前浏览器是否为微信内置浏览器——公众号H5开发用
//检查浏览器function checkBrowser() { var ua = navigator.userAgent.toLowerCase(); var isWeixin = ua.indexOf('micromessenger') != -1; if (!isWeixin) { alert("请使用微信浏览器打开！"); }}此方法来自微信官方检测方法...
2021-02-22 15:42:48
430
原创 Vue使用原生JS实现锚点跳转滚动效果
本文使用iView// 左侧导航元素<div class="project-left"> <div class="project-card" v-for="(item,index) in 6" :id="'card' + index" @click="goToAnchor(index)"> 测试 </div></div>// 右侧滚动元素<div class="result-card" v-.
2020-11-10 16:09:03
659
1
原创 Vue组件大全（持续更新）
前言：1、安装插件npm install --save qrcode2、卸载插件npm uninstall qrcode1.vue-draggable-resizable功能：可实现鼠标拖拽DIV，滚轮放缩小DIV安装方法：npm install --save vue-draggable-resizablemain.js配置方法import VueDraggableResizable from 'vue-draggable-resizable'import 'vue-dragga
2020-10-19 10:17:27
520
原创 vant框架DropdownMenu 下拉菜单组件在小程序中的应用
vant框架DropdownMenu 下拉菜单组件在小程序中的应用官方文档实例：<van-dropdown-menu> <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" /> <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" /></van-dropdown-menu>Page({ da
2020-09-14 19:56:04
7266
2
原创 Vue压缩图片插件——localResizeIMG(简称lrz)
使用前须知：GitHub:localResizeIMG地址这个项目已不再维护了，可能很长一段时间都不会更新了。插件演示地址引用：npm i lrz -S // 注意：使用npm下载，不要使用cnpm下载，有坑使用：import lrz from "lrz";本人使用的是Vant框架，获取file对象方法为：<van-field name="uploader" label="图片上传" multiple> <template #input>
2020-09-10 18:50:07
4902
1
原创 文章阅读感受——三年前端面试经验加感悟(干货分享)
原文链接：三年前端面试经验加感悟(干货分享)文章核心内容：总结：1.CSS 的灵活运用2.算法——二叉树后序遍历3.diff算法4.Vue——观察者模式5.系统性学习Vue源码6.Vue的执行流程和相关源码原理7.原型链8.算法——洗牌算法9.学历和工作经历10.不要频繁跳槽、不要闷头搬砖（钻研）11.个人修炼——写博客，记录自己平日的技术思考，倒腾出的解决方案，创建或者参与开源项目，把自己的博客和 Github整得有模有样，各种分析、源码、解决方案.
2020-09-08 18:59:21
178
原创 关于＜audio＞标签及控制的问题
开发框架：Vue需求 ：需要音乐在所有页面自动循环播放、不能遮挡fixd在底部的按钮。解决方案：audio标签设置播放器，js控制audio在页面是否隐藏<audio src="音频链接" autoplay="autoplay" loop="loop" controls="controls" class="audio" id="audio"> Your browser does not support the audio element.</audio>
2020-09-05 13:00:11
987
原创 CSS笔记——实现商品划线
效果：实现：text-decoration-line: line-through; // 划线text-decoration-color: #169bd5; // 划线的颜色原理:值 描述 underline 规定文本的下方将显示一条线。 overline 规定文本的上方将显示一条线。 line-through 规定文本的中间将显示一条线。 ...
2020-08-31 11:26:02
163
原创 笔记——CSS一行文本超出不换行
width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;// 四个属性都写上才能生效
2020-08-31 10:18:24
149
1
原创 CSS实现照片卡片瀑布流布局（两列）
1.问题：今天遇到了需要实现一个卡片的瀑布流布局的问题，卡片高度是不同的。最后使用css3中的column属性实现了这个布局，而且非常的简便啊(lz隐约记得上次写瀑布流的时候是用js实现的…naive啊)实现效果大概如下图～2.实现方法...
2020-08-31 09:55:32
2313
1
原创 JS对字符串的操作（查找，删除，替换）
1.查找let a = this.link.indexOf(''); console.log(a);// 说明// ‘this.link’为被查找的字符串// indexOf()中为你要查找的字符串// 返回值a为查找的字符串在被查找的字符串中的位置下标// 查找失败（没有查找的字符串）返回值为-12.删除、替换this.link = this.link.replace(这里为你要查找的字符串', '这里为查找到后替换为什么');// 说明// 1.注意要重新赋值// 2.‘thi
2020-08-28 17:14:12
2357
原创 微信支付踩坑之微信JSAPI配置支付授权目录
问题：微信JSAPI支付,配置支付授权目录,输入操作密码、验证码后无提示,也无添加记录.尝试多次,清空缓存,切换网络,重新登录等多种方法也无效解决：添加支付目录后，按流程正确输入操作密码后。界面会跳回来，这个时候发现并没有添加成功。接下来不要刷新网页，也不要点击别的模块。再添加一次刚才添加的目录。这个时候，你会发现不用输入操作密码了，然后，目录也添加成功了。perfect！！!...
2020-08-26 17:00:17
2009
2
原创 HTML常用占位符
符号 表示  ； 英文半角空格不换行  ； 英文半角空格不换行 　； 中文全角空格 &ensp； 半角空格  ； 半角空格  ； 全角空格 &emsp； 全角空格  ； 四分之一全角空格  ； 英文半角空格 注意：em是字体排印学的计量单位，相当于当前指定的点数。例如，1
2020-08-26 11:44:43
3203
原创 jQuery ajax请求格式
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> // 引入jQuery，百度搜索可下载 $.ajax({ type: '', // post或者get url: '', // 请求地址 contentType: 'application/json;charset=utf
2020-08-25 17:29:38
320
原创 JavaScript获取日期方法
JS获取日期所有方法方法 描述 getDate() 以数值返回天（1-31） getDay() 以数值获取周名（0-6） getFullYear() 获取四位的年（yyyy） getHours() 获取小时（0-23） getMilliseconds() 获取毫秒（0-999） getMinutes() 获取分（0-59） getMonth() 获取月（0-11） getSeconds() 获取秒（0-59） g
2020-08-25 17:22:25
243
原创 HTML radio单选组获取选中元素
需求：获取选中的元素解决方案：// 此为JS方法，使用时直接调取function GetRadioValue(RadioName){ var obj; obj=document.getElementsByName(RadioName); if(obj!=null){ var i; for(i=0;i<obj.length;i++){ if(obj[i].checked){...
2020-08-25 15:52:00
953
原创 HTML移动端禁止缩放页面 meta属性（ios和安卓）
1.通用<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />/*width // 设置 viewport 的宽度，正整数/字符串 device-widthheight // 设置 viewport 的高度，正整数/字符串 device-heightinitial-scale.
2020-08-25 13:29:44
3177
原创 Vue中axios请求格式
this.$get('url', { // 地址 businessid: '1', // 参数},).then((response) => { // 这里是处理正确的回调 window.console.log(response.data);});
2020-08-20 18:29:15
240
原创 小程序文字上下滚动轮播效果实现CSS
wxml<viewclass="demo-list"><viewclass="rowup"><viewclass="item">1- 这是一句话</view><viewclass="item">2-这是一句话</view><viewclass="item">3-这是一句话</view><vi...
2020-08-19 18:13:55
1671
原创 Vue.js学习之路之使用百度地图API
需求说明：用vue开发外卖平台，在外卖平台中需要知道商家地址信息，这时就需要借用百度地图API。解决方案： 步骤一：申请百度地图密钥； 步骤二：在index.html中添加百度地图JavaScript API接口；//注意：Vue要在头部引用js，这样组件才能获取<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9o...
2020-08-14 17:56:08
448
原创 外卖商家入驻选择类目（JS数组）
let columns = [ { text: '美食', children: [ { text: '快餐简餐', children: [{text: '意面披萨'}, {text: '汉堡'}, {text: '鸡肉卷'}, {text: '牛排'}, {text: '三明治'}, {text: '轻食/沙拉/健康餐'}, ..
2020-08-14 12:41:53
412
原创 微信小程序学习之路——按钮吸底效果
position:fixed;// 使按钮固定于可视窗口的底部bottom:0;left:0;right:0;height:44px;// 设置固定高度
2020-07-28 12:05:11
2129
原创 初入前端开发从0到1——Vue+Vant开发外卖点单项目学习记录（1）
需求：vant的Popup 弹出层只能设置固定高度，无法根据商品卡片数量改变高度。引入import Vue from 'vue';import { Popup } from 'vant';Vue.use(Popup);基础用法<van-cell is-link @click="showPopup">展示弹出层</van-cell><van-popup v-model="show">内容</van-popup>expo.
2020-07-24 11:36:32
567
原创 MUI 图文卡片（左布局）仿通讯录
<li class="mui-table-view-cell mui-media" > <a class="mui-navigate-right" id="div_list" href="tel:"> <img class="mui-...
2020-04-22 00:14:08
367
已封装好的axios，Vue中使用
2020-08-20
外卖平台经营类目（完全版，包含所有经营类目，入驻用）
2020-08-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人