- 博客(29)
- 收藏
- 关注
RSS订阅
原创 ** PC端完美兼容各种分辨率的简便方法 **
PC端兼容各种分辨率的简便方法小程序、前端交流群：609690978PS：此方法需使用到less或者scss的@变量来支持以设计图 1920 宽度为例：css中存在一种叫vw的单位，是针对浏览器宽度为基础的百分比单位，与%的区别在于，子元素%是相对于父级元素的宽度来计算的，而vw则是针对浏览器的宽度来计算的。打个比方，浏览器宽度为1920px，父级元素宽度为100px，子元素宽度写50%则...
2019-10-28 18:55:12
4404
3
原创 **微信小程序之登录后返回登录前的页面（带参数）**
在实际开发过程中，由于接口的各种限制条件，比如下单操作，就需要用户进行登录才能进行调用，然而在用户登录之后再返回之前的页面怎么操作呢？思路是：首先，我要知道用户之前在哪个页面进行操作。其次，我们需要获取到这个页面的路由。最后，再登录后返回该路由。但是有时候，这些页面也是携带了参数的，需要登录之后带参数返回（其实说白了，就类似于一个完整的url,只是小程序中没有ip+端口号，直接就是路径+参数，要全...
2019-05-31 14:18:45
9211
原创 VUE使用webWorker处理万级数据
VUE使用webWorker处理万级数据接到一个查询全国银行数据的需求，总数据达到10兆，超过10万条数据。首先调用接口时势必会导致浏览器严重卡顿，其次在把这十万条数据渲染到页面上时，操作也会十分卡顿，所以我们要对此进行相关处理和优化用到的插件1.VUE基于webWorker的插件：VueWorker，npm install vue-worker --save2.虚拟DOM渲染插件：VueVirtualScroller，主要是只渲染可视范围内的dom，以达到渲染不卡顿的目的，npm install
2022-01-16 02:52:05
3419
2
原创 小程序基于雪碧图实现3d(横向全预览) ----组件
小程序、前端交流群：609690978先上效果图：准备条件：雪碧图，规格：单图尺寸343*375，帧数45帧（如图）上代码：wxml<wxs src="./animate.wxs" module="wxsFun" /><view class="{{ loadEnd ? 'active' : ''}}"> <image src="{{ value }}" class="slideImg" mode="heightFix" bindload="handl
2021-04-14 18:32:16
1169
原创 **input=file上传文件用div替换上传按钮及获取文件信息**
小程序、前端交流群：609690978<div class="box"> <div class="blank">{{ fileName }}</div> <div class="uploadBtn" @click="choiceFile">点击上传</div> <input id="file" ref="file" type="file" name="file" @change="getFile()"/></d
2021-04-08 15:59:55
508
原创 **ESLint + Prettier + VSCode自动校验/修复Eslint语法规则**
小程序、前端交流群：609690978写在前面： 本教程为有一定代码规范的开发者提供。如果您是新手，建议严格按照规范矫正自己的代码风格。尽量在没有ESLint的情况下也能写出漂亮规范的代码您是否还在为ESLint的语法校验规则而头疼？您是否还饱受ESLint的语法规则的折磨？您是否还在手动修改ESLint的错误？别着急，这篇文章将彻底让你告别ESLint所带来的各种困扰。（视频以Vue-js录制，适用于anglar中的ts）先上效果：
2021-01-15 18:18:58
1248
4
原创 vue 返回顶部动画效果
vue 返回顶部动画效果小程序、前端交流群：609690978 methods: { // 监听页面滚动 scrollToTop() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop this.showTopTimer && clearTimeout(this.showTopTimer)
2020-09-25 19:44:35
1233
原创 js 数组元素排序
js 数组元素排序// 排序 compare(value1, value2) { if (value1 < value2) { return -1 } else if (value1 == value2) { return 0 } else { return 1 } }, const arr = [186, 100, 446, 372, 273] console.log(arr
2020-09-24 11:51:10
185
原创 js获取与指定的值最近的数组元素
js获取与指定的值最近的数组元素near(arr, n) { arr.sort(function (a, b) { return Math.abs(a - n) - Math.abs(b - n) }) return arr[0] },const arr = [0, 122, 133, 178, 190]console.log(arr, 120) // 122
2020-09-24 11:40:17
791
原创 ** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 **小程序、前端交流群：609690978 先上效果图代码：<div id="classifyScroll" :class="showLeftIcon ? 'active' : ''"> <div class="classifys"> <van-icon name="arrow" class="rightIcon" v-show="s
2020-09-23 18:49:22
5947
5
原创 js 循环删除数组中指定的或符合条件的对象或重复的对象
一般删除数组中的某个对象或元素，我们会用到splice,如：const arr = [1, 2, 3, 4, 5]arr.splice(0, 1) // [2, 3, 4, 5]如果要删除某个指定的对象或元素，如，删除3:const arr = [1, 2, 3, 4, 5]arr.splice(arr.findIndex(item => item === 3), 1) // [1, 2, 4, 5]但是，如果要循环删除数组里但某个对象要如何操作呢？如下数组：const arr =
2020-09-10 15:00:23
6298
2
原创 **【组件】vue实现自定义tab栏下划线滚动过渡效果以及点击当前tab自动居中**
vue实现自定义tab栏下划线滚动过渡效果以及点击当前tab自动居中小程序、前端交流群：609690978先上效果图组件代码：<template> <div v-if="list.length > 0" class="tabBlock"> <div @scroll="scroll" class="tabContent"> <div ref="tabContentScroll" class="tabContentScroll"&
2020-05-12 18:03:24
3024
1
原创 1.NodeJs基础一 ：NodeJs HTTP 模块、URL 模块、 supervisor 工具
NodeJs HTTP 模块、URL 模块、 supervisor 工具一、Node.js 创建第一个应用如果我们使用 PHP 来编写后端的代码时，需要 Apache 或者 Nginx 的 HTTP 服务器， 来处理客户端的请求相应。不过对 Node.js 来说，概念完全不一样了。使用 Node.js 时， 我们不仅仅在实现一个应用，同时还实现了整个 HTTP 服务器。1、引入 http 模...
2020-04-12 23:46:35
330
原创 **JS for循环、map方法对树形结构数据的处理**
小程序、前端交流群：609690978tree树形结构的处理方法：首先要满足两点：1.数组内每个对象都得有自己独一无二的id2.数组内每个对象都得有其父级id且第一级的父级id为0例如： let data = [ { "id":"1", "name":"第一级", ...
2019-09-04 17:45:18
3029
原创 **微信小程序常用方法、API封装之微信支付封装**
小程序交流群：609690978今天介绍一下微信支付吧，没有接触过的也没关系，简单点说，就是要先下单，获取微信统一下单prepay_id，当然，需要把订单id传给后台，然后返回给你一些信息，比如时间戳，签名什么的，具体的有以下参数：然后，你需要通过wx.requestPayment接口把这些参数传给微信支付接口发起微信支付。所以，如果你按部就班的写的话，就会这样：wx.request下单，...
2019-07-19 15:07:46
259
转载 webpack安装配置以及填坑操作之 webpack command not found 的解决方法
转——https://blog.youkuaiyun.com/qq_38111015/article/details/79013475
2019-07-12 17:19:22
739
原创 **纯CSS实现瀑布流布局**
小程序交流群：609690978先上图，要分几列进行瀑布流可自定义：上代码：<div class="box"> <div class="box-item" v-for="(item,index) in imgList" :key="index"> <img src="item"> </div></div>重点来了...
2019-07-08 10:46:17
273
原创 **微信小程序自定义组件Component及Template模板详解**
小程序交流群：6096909781.template关于template模板的话，我就长话短说。简单点讲，如果你有多个页面使用的UI布局都是一样的，又没有什么逻辑，比如首页有一个热销商品，商品列表又有个一样的布局，如下图：像这样的，你点击一下就会进入到商品详情页，没有其他任何逻辑，单纯的为了展示，你就可以使用template。1.新建一个template文件夹，在里面建子文件夹good...
2019-06-17 09:23:10
424
原创 **微信小程序常用方法、API封装之alert + showToast + 节流函数**
小程序交流群：609690978##小程序在创建项目的时候，会有一个utils文件夹，下面有个util.js文件，这个就是给大家存放封装函数用的。当然，你也可以自己写个js文件进行封装，只是调用不同罢了。今天就给大家分享一下一些常用的方法或API。1.alert众所周知，小程序是没有alert弹框的，但是为我们提供了wx.showModal这个API。（具体如下图）但是，每次写个弹框都这...
2019-06-14 17:26:34
2957
原创 **微信小程序常用方法、API封装之网络请求（wx.request）+ 接口（API）封装**
小程序交流群：609690978首先了解一下，为什么要封装网络请求和API。我认为一切封装都是为了简化开发，便于维护。比如，wx,request这个网络请求的方法，完整的写下来，是这样的： wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: {...
2019-06-14 17:23:49
1364
原创 **【全局分享】微信小程序设置全局分享（标题，图片，路径）**
页面分享内容都一样，但是要在每个页面里都写是不是很烦？没关系，下面教你如何解决：//重写分享方法 share: function () { //监听路由切换 //间接实现全局设置分享内容 wx.onAppRoute(function (res) { //获取加载的页面 let pages = ...
2019-06-12 16:32:26
7617
2
原创 记一下绝对定位下的各种居中问题（水平居中或垂直居中）
平时碰到的问题基本上都是要求垂直且水平居中，这里我就不介绍绝对定位下的垂直且水平居中的方式了，百度一下多的很。今天碰到的问题是，一个导航栏，居左且垂直居中，百度了一下，全是水平且垂直居中，很烦，还是自己写吧。1.垂直居中且左对齐.div{ position: absolute; bottom: 50%; left: 0; transform: translate(5...
2019-06-03 17:48:46
2071
原创 **微信小程序 分页加载 （上拉加载） **
聊一下小程序的下拉加载功能，其实很多人依赖于后台的返回的page页数和total总条数其实这两个参数都不需要，下面介绍一下如何实现1.首先，在json文件里配置如下：（其实配不配无所谓，我亲测不写这个也可以，但是还是写上吧，规范一点）"enablePullDownRefresh": true2.设置js变量：Page({ data(){ isMore:true, //是否有...
2019-05-30 17:06:37
1301
7
原创 VUE父子组件监听状态变化
在不使用VUEX的情况下，通过props传值，父组件直接修改子组件的相关数据会报错。这里以父组件弹框为例讲一下如何操作……父组件html<father @changingType="showDialog" :showPopup="showPopup" ></father >父组件 jsexport default{ props:['showPopu...
2019-05-30 15:31:05
2475
转载 js 数组 map() 基本用法【转】
var data = [3, 4, 5, 6];var Squares = data.map(function (item) { return item * item;});console.log(Squares);// [9, 16, 25, 36]```var users = [ {name: "张含韵", "email": "zhang@email.com"}, ...
2019-05-30 10:44:43
2493
原创 微信小程序 使用Vant 的SwipeCell组件时，scroll-view无法滚动页面的解决方案
这是vant的一个BUG，解决方式如下：1.找到swipe-cell的目录，主要修改wxml和js。2.如下图
2019-05-17 19:51:33
6749
1
原创 VUE-CLI3.0按需引入elemet-ui的方法
在VUE-CLI 2.0版本中，按需引入elemet-ui的方法是安装npm install babel-plugin-component -D后，将.babel文件修改为：{“presets”: [[“es2015”, { “modules”: false }]],“plugins”: [[“component”,{“libraryName”: “element-ui”,“sty...
2019-05-14 10:02:18
757
原创 **ES6快速删除数组中指定元素的方法**
let arr =[{id:1},{id:2},{id:3},{id:8}]let id = 8arr.splice(arr.findIndex(item => item.id === id), 1) // [{id:1},{id:2},{id:3}]
2019-05-08 17:34:44
7166
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人