- 博客(31)
- 收藏
- 关注
RSS订阅原创 微信小程序开发常用方法
持续更新中1.解决ios底部横杠 padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);2.小程序点击函数节流<button bindtap='tap' data-key='abc'>tap</button>const util = require('../../utils/util.js')Page({ data: {
2022-03-28 10:29:37
1808
原创 js字符串每隔几个字符加空格
//length 间隔字符串的长度 str字符串function SplitFn(length,str){ var reg = new RegExp('[^\n]{1,'+length+'}','g'); var res = str.match(reg); return res.join(' '); },
2022-01-18 17:13:07
1037
原创 swiper,animate混合使用方法及页面滚动触发动画效果
要实现的效果：swiper滚动触发动画效果需要用到的文件(缺一不可)swiper.min.cssswiper.min.jsanimate.cssswiper.animate1.0.3.min.jsswiper 版本用的是4.5.3 下载链接swiper.animate 版本用的是1.0.3 下载链接animate 版本用的是4.1.1下载链接1.引入文件<link rel="stylesheet" href="./css/swiper.min.css"><
2022-01-04 11:56:35
2478
原创 小程序checkbox 限制选择个数
WXML<checkbox-group> <label class="checkbox padding-sm fl" wx:for="{{items}}" wx:key="r_ability_checkbox" wx:for-item="a" id="{{index}}" bindtap="{{!a.canCheck?'checkChange':''}}" > <check
2021-12-16 20:29:14
1184
3
原创 js方法的封装(ajax、获取url里的参数、手机号验证、webSocket、时间倒计时)
//** 公共 JS **//const BASE = window.location.hostconst BASE_URI = 'https://'+ BASE +'/'// ajax 请求参数var ajaxSettings = function(opt,success) { var url = 'https://'+ BASE +'/' + opt.url; var href = location.href; // 判断是否跨域请求 var requestTy
2021-11-25 16:07:42
643
原创 处理小程序富文本的各种问题(处理图片)
//rich-text.jsfunction formatRichText(html){ let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){ match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); match = match.replace(/width="[^"]+"/gi, '').
2021-11-02 10:34:29
250
原创 微信小程序识别ios平台的底部黑杠padding
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
2021-10-26 11:57:40
277
原创 node.js学习（四）
socket.io聊天室案例安装socket.io客户端: socket.io-clientnpm i socket.io-client服务端：koa-socketnpm i koa-socket//app.jsvar Koa = require("koa")var Router = require("koa-router")var bodyParser = require('koa-bodyparser')var session = require('koa-session')va
2021-10-19 15:53:23
88
原创 node.js学习（三）
文章目录Koa框架koa引入htmlkoa 第三方中间件 koa-router (路由)koa-art-template模板(快速加载页面)koa-bodyparser 以及处理静态资源(koa-static)koa-session 存数据(存到浏览器端)koa-session 存数据(存到服务器端)session案例(聊天)Koa框架安装npm i koavar Koa = require('koa')var app = new Koa()// app.use(function(conte
2021-10-11 14:18:06
96
原创 node.js学习（二）
node.js学习（二）响应静态资源express框架art-template 模板引擎express加载学生列表响应静态资源// 响应静态资源var http = require("http")var fs = require("fs")var server = http.createServer()server.on("request",function(req,res){ var urls=req.url if(urls=='/'){ fs.read
2021-10-08 14:46:21
64
原创 node.js 学习（一）
一Nodepath 路径fs 文件httpurl 地址加载学生列表（案例）npm安装模块卸载模块安装nrmnodemonNodeR 读取E 执行P 打印L 循环node.js模块：内置模块 自定义模块 第三方模块启动命令 ：node 文件名path 路径path.basename() 取路径最后一层path.dirname() 去掉路径最后一层path.join() 拼接路径path.parse() 路径转对象path.format() 对象转字符串var path =
2021-10-06 17:46:23
66
原创 最全的js 字符串操作方法
charAt,charCodeAt,indexOf,lastIndexOf,includes,startsWith,endsWith,concat,split,slice,substr,substring,toLowerCase,toUpperCase,replace,match,search,trim,trimStart,trimEnd,valueOf,toString,repeat,padStart,padEnd,parseInt,parseFloat
2021-09-25 15:48:03
6884
2
原创 微信小程序swiper解决中间内容放大，最后一项无法放大问题
样式展示问题：<swiper display-multiple-items="3" bindchange="currentChange" interval="3000" autoplay="true" circular="true"> <block wx:for="{{newManList}}" wx:key="index"> <swiper-item> <!-- select_item为中间放大内容样式 --> <vie
2021-09-13 10:39:38
651
原创 小程序swiper指示点 自定义样式
未选中样式.top_swiper .wx-swiper-dot { content: ''; width: 12rpx; height: 12rpx; border-radius: 5rpx; background: #fff;}选中样式.top_swiper .wx-swiper-dot.wx-swiper-dot-active { background: #fff; border-radius: 6rpx; width: 26rpx; height: 12rp
2021-08-31 18:12:21
172
原创 ant design vue 中合并表格后用v-model 绑定data中数据
<a-table :columns="prepaycolumns" :data-source="prepaydata" :pagination="false" > <template slot="footer"> <span>应付总金额：￥24000.00</span> </template> </a-table>data() { const prepaycolumns = [ { dat.
2021-08-17 10:45:33
530
原创 animate.css+wow.js=这官网真好看(根据滑动到位置，加载该位置动画)
先看下效果：动画效果网页未显示区域的动画是不加载的，等到滚动到指定区域才会加载css动画，这个动画只加载一次，想要再看就得刷新页面，动画依赖于animate.css可以看下我们公司的官网：公司项目地址看着还是很美观的，动画加载的很舒服，想要这种跟随页面滑动加载就得靠wow.js 哇哦!!!当然你也可以自己写,项目不急的情况下，自己慢慢研究还是很棒的。animate.css下载地址wow.js并没有找到官网，详细点的可以看这个地址（包含下载地址和详细配置信息）实现方法<link rel
2021-07-30 16:28:50
1286
1
原创 微信小程序中new Date()转换时间格式时IOS不兼容的问题
小程序真是一步一个坑，坑坑都让你掉下去安卓系统以及在微信小程序开发者工具里使用new Date(“2021-07-28 00:00:00”)，转换是没有问题的，在ios系统就成了NAN了，甚至ios在真机调试都不会出现这个问题，等项目上线了才能看到，坑死了，*** ios new Date()转换必须是 年/月/日 00:00:00 ,还好这个格式安卓也兼容前端解决方法对字符串进行处理var date="2021-07-28 00:00:00"new Date(date.replace(/-/g
2021-07-27 15:51:45
386
1
原创 微信小程序瀑布流实现及遇到的坑
实现效果实现思路1.从接口获取数据后，将数据分为两组，左右各为一组数据。2.图片的宽度固定，只需要计算图片的高度即可，由于接口返回的数据没有图片的宽高，所以要通过计算图片的高计算公式：固定的宽度/图片的宽度*图片的高度3.然后通过比较左右两边(数据列表)的高度，来确定下一张图片放在哪边先说一下遇到的坑wx.getImageInfo()实现的效果：顺序是不对的每次刷新顺序都会变，原因wx.getImageInfo()是异步的方法解决的方法，就是对wx.getImageInfo()进行封
2021-07-27 11:56:50
1424
1
原创 js小数运算出现的问题(精度丢失)及解决办法
以下是在项目中遇到的问题购物车结算时，商品价格(33.01)-优惠券价格(5)，本应该是28.01，但是实际的结果是28.009999999999998之前真没遇到过这种问题，查了很多资料才了解到js 小数相加减是会出现精度丢失的问题案例本案例是在浏览器控制台里打印出现这种问题的原因，查看详细原因(链接)原因其实就是js number类型运算都需要先将十进制转二进制但小数点后的位数转二进制会出现无限循环的问题，只能舍0入1，所以会出现小数点丢失问题，感兴趣的可以自己研究，链接在上面。解决
2021-07-23 13:52:05
32580
10
原创 最常用的css文字溢出问题及htmlcss文本英文符号换行问题
1.单行white-space: nowrap;text-overflow: ellipsis;overflow: hidden;2.多行overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
2021-07-22 17:47:34
232
原创 css函数
1.calc() 用于动态计算长度值注意：运算符前后都需要保留一个空格<style> .big_box{ width: 100%; position: relative; } .calc_test{ position: absolute; width: calc(100% - 100px); top: 50px;
2021-07-22 16:07:27
45
原创 vue中mock创建数据(带分页)，post获取数据后，实现滚动加载更多数据
创建完项目后，安装mocknpm install mockjs先在src目录下创建mock.js在mock.js中输入：// 引入mockjsconst Mock = require('mockjs')//post 请求Mock.mock('/mock/getList','post',function(option){ // console.log(JSON.parse(option.body));//可以打印option看下，需要先在vue页面中引用参能看到 //option为po
2021-07-14 13:54:23
553
原创 jq实现滑动通过验证
效果如下：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
2021-07-13 16:40:00
520
原创 获取form表单全部数据
简单记录下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
2021-07-13 11:43:44
2538
原创 vue引用腾讯地图报‘TMap‘ is not defined,解决方法
根据腾讯地图官方文档引入直接在vue中引入后会出现’TMap’ is not defined问题解决办法：只需将<script src="https://map.qq.com/api/gljs?v=1.exp&key=****-****-****-****"></script>放到public/index.html文件里，其他不用改变大部分文档都是这么解决的，但我遇到了很恶心的一点，找了很多文档，都没解决’TMap’ is not defined这个问题，之
2021-07-12 16:54:08
9188
7
原创 css改变滚动条样式
1.改变浏览器默认的滚动条样式::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性 background-color:#f8f8f8;}::-webkit-scrollbar {//滚动条的宽度 width:9px; height:9px;}::-webkit-scrollbar-thumb {//滚动条的设置 background-color:#dddddd; background-clip:padding-box; min-h
2021-07-06 14:15:50
42
原创 jq实现放大镜效果
功能介绍很多购物平台都会有这种放大镜效果，通过移动鼠标使图片放大，主要是方便顾客查看图片基本原理左右各放一个div ，里面分别放相同的图片，右边的图片像素要比左边的大，这样会更清晰主要用的事件mouseenter mouseleave mousemove 三个事件，简单介绍下mouseenter当鼠标接触到绑定元素的时候，立即触发一次，注意并不是一直触发mouseleave当鼠标离开绑定元素的时候，触发一次mousemove当鼠标在绑定元素上移动时会不断触发为什么不用mouseo
2021-06-19 18:20:00
548
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人