- 博客(24)
- 收藏
- 关注
RSS订阅原创 微信小程序收藏功能实现思路
1.在详情页上面先定义未收藏的图标，根据切换src来更改图片<image src="{{src}}" catchtap="add_soucang" data-user="{{list}}"></image>2.当点击未收藏图片的时候，我们去请求接口让当前的商品添加到收藏的接口，且利用视图更新去把当前的src变成红色收藏的图片add_soucang(e){ let {id} = e.currentTarget.dataset.user.id console.log(e.
2020-06-24 21:31:49
2918
1
原创 微信小程序搜索的实现思路
实现思路1.先对input框绑定个search方法进行搜索2.在js中写sarch方法，利用wx.request查找数据，success成功之后开始查找自己要的数据.3.根据input框的输入值且利用filter进行过滤，然后再利用indexof方法查找对应的数据（indexOf方法获取到指定的字符在字bai符串中第一次出现的位置，从0开始。如果一开始就是e则返回0，如果第二个位置是e则返回1，如果搜完整个字符串都没有e则返回-1 。反证法 如果该方法不返回-1 就证明该字符串中含有e字符。）4
2020-06-23 22:13:57
688
原创 微信小程序的分类功能思路
实现思路1.把屏幕当成一个固定的盒子，然后把盒子分成两边，并让盒子的每一边都能够滚动。2.通过将左侧边栏元素的id和右边内容的categoryId进行匹配，渲染展示相同id的内容页面data定义的初始数据 /** * 页面的初始数据 */ data: { classify_sidebar: [], //左侧边栏内容的数组 classify_content: [], //右边内容元素的数组 list: 124849, //绑定切换时的id },1.
2020-06-22 23:37:46
1472
原创 懒加载和预加载
1、懒加载1.什么是懒加载？懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。2.为什么要使用懒加载？很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。3.懒加载的原理是
2020-06-21 19:21:20
208
原创 vuex数据持久化
vuex结合localStorage实现状态持久化1 . 安装npm install vuex-persistedstate2 . 在store.js里import createPersistedState from 'vuex-persistedstate'const state = { user:{},}export default new Vuex.Store({ state, getters, actions, mutations, p
2020-06-21 01:09:37
146
原创 keep-alive
keep-alive是什么？keep-alive 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。当用它包裹 时，会缓存不活动的组件实例，而不是销毁它们。和 相似，它自身不会渲染一个 DOM 元素。使用 组件后即可使用 activated() 和 deactivated() 这两个生命周期函数应用场景？例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100
2020-06-19 21:18:21
163
原创 slot
1 、slot 基本用法插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 </div> `, data () { return
2020-06-18 20:04:01
151
原创 Vue项目中用户登录及token验证
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token6、后端判断请求头中有无token，
2020-06-17 10:18:29
304
原创 原生Ajax的创建过程
1.创建xhr 核心对象var xhr=new XMLHttpRequest();2.调用open 准备发送参数一：请求方式参数二: 请求地址参数三：true异步，false 同步xhr.open('post','http://www.baidu.com/api/search',true)3.如果是post请求，必须设置请求头。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')4.调用
2020-06-16 15:58:40
144
原创 async、await
1.asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数2.异步async函数调用，跟普通函数的使用方式一样3.异步async函数返回一个promise对象4.async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的使用场景async主要来处理异步的操作，需求：执行第一步，将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据，后使用第一部返回的数据执行第二步操作的接口调用，达到异步操作。模拟出一个摇色子的异步操作，先通过一
2020-06-15 23:43:21
143
原创 js图片懒加载
图片懒加载图片懒加载原理：前端工程师在做页面优化的时候，如果页面中是类似图片列表的结构，会考虑使用懒加载技术来优化页面的加载速度在html页面里写，把js引入html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
2020-06-15 08:17:06
121
原创 Promise理解以及封装ajax
Promise面试官可能会问：Promise你怎么理解的，在项目中用过没有 1.Promise是一种为了避免回调地狱的异步解决方案 2.Promise是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败） 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 3.Promise暴露的API## .then(函数1，函数2)函数1：表示成功返回函数2：代表失败返回## .c
2020-06-12 00:02:28
172
原创 闭包案例
one <script> var index = 1; // 闭包特点：1.函数 // 2.这个函数能访问到函数外部的状态（也称函数外部的变量） function getIndex(){ console.log(index) // 1 } getIndex() </script>two <script> var in
2020-06-01 20:49:17
153
原创 字符串的常用方法总结
先定义一个字符串 var str = “abbcalgldkjgldgehlgjldf”;1，indexOf()，返回指定字符创第一次出现的位置str.indexOf('a') //结果是02，lastIndexOf()，返回指定字符串最后一次出现的位置。str.lastIndexOf('f') //结果是223，substring()，提取字符串中两个指定索引号之间的字符（两个索引不能为负值）str.substring(0,5) //结果是abbca4，slice()，提取字符串中两个
2020-05-27 21:44:19
142
原创 call apply、bind区别
apply、call和bind的区别相同点：1.都是用来改变函数的this对象的指向的。2.第一个参数都是this要指向的对象。3.都可以利用后续参数传参。区别：1.fn.call(obj, arg1, arg2, …),调用一个函数, 第一个参数为要改变的this，第二个参数为要传递的参数，参数与方法中是一一对应的。2.fn.apply(obj, [argsArray]),第一个参数为要改变的this，第二个参数为要传递的参数作为一个数组（或类数组对象）提供的参数3.bind 和call/
2020-05-27 20:47:10
216
1
转载 vue better-scroll插件完成上拉加载更多
一、下载 better-scrollnpm install better-scroll -S二、组件中引入<template> <div class="rules"> <p class="drop-down" v-if="dropDown">松手刷新数据...</p> <div class="bscroll" ref="bscroll"> <div class="bscr
2020-05-27 19:44:19
216
原创 axios数据封装
安装axiosnpm i axios -Saxios官方github仓库地址：https://github.com/axios/axio创建个http文件夹创建个request.js用来创建axios实例，默认接口域名url’，默认超时时间在main.js引入http再创建个api.js业务逻辑封装最后在也页面调用即可...
2020-05-19 23:26:14
155
原创 Please restart this script from an administrative PowerShell!
解决办法1、以管理员身份运行cmd搜索cmd，然后右键“以管理员身份运行”2.再运行命令npm install --global --production windows-build-tools
2020-05-18 21:02:51
1174
原创 变量的解构赋值
解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构1.数组的解构赋值2.对象的解构赋值3.字符串的解构赋值4.数值和布尔值的解构赋值5.用途一.数组的解构分为匹配模式 省略模式//匹配模式let [a, b, c] = [1, 2, 3];let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3//省略模式let [ , , third] = ["foo", "bar
2020-05-12 22:27:00
164
原创 let ，const，var区别
总结let const 具有块级作用域 var没有let const不允许变量提升会报错, var会显示undefinedlet const 不允许重复声明基本用法一，letlet具有块级作用域 var没有for (let i = 0; i < 10; i++) { // ...}console.log(i);// ReferenceError: i is not definedfor (var i = 0; i < 10; i++) { // ...
2020-05-11 20:40:27
158
原创 npm install 报错踩坑路,npm报错以及卸载node,npm和node版本不符合
npm install 报错踩坑路先出现的是超过最大调用栈问题：npm ERR! Maximum call stack size exceeded 百度之后说给npm降级或者升级降级 ： npm install -g npm@5.4.0升级 ： npm install -g npm 升级到最新版结果降级之后再尝试的时候就直接报版本跟node.js不兼容的问题，然后各种在升级都不好使，只能重新删掉在升级**npm报错以及卸载nodeC:\Users\Administrator\Deskt
2020-05-10 20:22:28
1799
原创 clientWidth，offsetWidth，scrollTop，scrollHeight的区别
## 根据规范，以下 HTML 和 CSS 代码解析后， container.clientWidth 的值是:<style>#container {width: 200px;height: 200px;padding: 20px;margin: 20px;border: solide 10px black;}</style><div id="container">content</div>（B）ele.clientWidth
2020-05-09 15:45:41
290
原创 实现给元素删除一个样式的同时，添加另外一个样式
在很多时候，我们需要给网页中的一些元素不停的切换样式，那么要怎样实现给元素删除一个样式的同时，添加另外一个样式（ ）A. $('#ele').removeClass('className'); $('#ele').addClass('ClassName');B. $('us').removeClass('className'); $('us').addClass('ClassName'); C. $('.us').removeClass('className'); $('.us')
2020-05-08 22:21:29
1099
1
原创 微信小程序如何封装api接口
微信小程序如何封装api接口首先创建个http文件夹（可自定义名字）一：创建个env.js文件用来设置公共访问的url，即环境地址module.exports = { //开发环境 dev:{baseUrl:"http://localhost:3000"}, //测试环境 test:{baseUrl:"http://www.test.com"}, //线上环境（公共部分...
2020-05-07 20:42:06
1177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人