在使用uniapp开发的过程中,我相信,我们都一定遇见过如下的场景: 进入了一个列表页,列表页进入详情页,在详情页进行了一些操作,比如,删除,修改,编辑,提交,成功之后返回到列表页,那么这个时候,如果我们的列表页不进行数据的刷新,就会给用户一种错觉,我刚才进行操作的那条数据会不会没成功,我们下拉刷新下列表,这个数据就变成最新的了,这个是很常见的一个交互场景,那么如何不让用户进行下拉刷新或者重新进入列表页的操作,我提供几种比较常用的做法! onShow:简单粗暴,但是却有缺陷使用onShow可能是最简单的写法 ,我们只需要将请求的方法,放在onShow里面执行即可,onShow是这么的一个生命周期 用法超级简单,但是却有着比较大的缺陷,例如:我点进了详情,但是我什么都不做,而后返回列表页,这个时候,依然进行了一个getList方法的执行,重新进行了请求,合理吗?很显然不合理!怎么办? 页面通讯:uni.$emit, uni.$on这个可能是我用的最多的方式,页面简介 | uni-app官网 用法其实也比较简单,在列表页中的onLoad周期中进行事件的监听,在详情页面中进行emit事件 ...
1.‘data:image/png;base64,’ + 获取到的base64数据 1this.imgUrl = 'data:image/png;base64,' + res.data.data.img 2.打印出的转换数据(this.imgUrl)放在浏览器上可以显示,目前此步渲染不到image标签上,这是因为base64字符串太长,在传输过程中加入回车导致 3.解决办法:.replace(/[\r\n]/g, “”) 1<image :src='imgUrl.replace(/[\r\n]/g, "")'></image>
1. Vue3简介 2020年9月18日,Vue.js发布版3.0版本,代号:One Piece(n 经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者 官方发版地址:Release v3.0.0 One Piece · vuejs/core 截止2023年10月,最新的公开版本为:3.3.4 1.1. 【性能的提升】 打包大小减少41%。 初次渲染快55%, 更新渲染快133%。 内存减少54%。 1.2.【 源码的升级】 使用Proxy代替defineProperty实现响应式。 重写虚拟DOM的实现和Tree-Shaking。 1.3. 【拥抱TypeScript】 Vue3可以更好的支持TypeScript。 1.4. 【新的特性】 Composition API(组合API): setup ref与reactive computed与watch …… 新的内置组件: Fragment Teleport Suspense …… 其他改变: 新的生命周期钩子 data 选项应始终被声明为一个函数 移除 ...
一、mockjs定义 拦截ajax请求,生成伪数据 应用场景:在工作中,后端已经出接口文档,还没有实现数据 由前端依照接口文档模拟伪数据,实现前端开发功能 二、mockjs安装1npm i mockjs -D 三 、mockjs使用(从此处起下方标红为关键信息,黑色可不看) 定义/mock/index.js 123456789首先导入Mockimport Mock from 'mockjs' 然后定义伪数据(小示例,下方精华里有具体定义步骤)Mock.mock(" lapi/feed", Mock.mock({ "data|20": [{自定义数据类型}] })) 在main.js导入 1import './mock/index.js' 使用mockjs前先在main.js中进行如下操作(post与get都要进行)123456789101112131415161718192021// 在main.js中导入自定义mock文件im ...
1234567891011121314151617181920212223242526272829303132333435363738394041424344//下载PDF文件 function downLoadFile(){ wx.showModal({ title: '温馨提示', content: '确认要打开此PDF文件吗?', showCancel: true, cancelText: '取消', confirmText: '确定', success: (result) => { if (result.confirm) { wx.downloadFile({ url: 'https://XXXX.com/pdf', //实际获取文件的url地址 ...
123456789101112131415161718192021222324252627282930/** 数字金额大写转换(可以处理整数,小数,负数) */ dealBigMoney(n) { var fraction = ['角', '分']; var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']; var unit = [ ['元', '万', '亿'], ['', '拾', '佰', '仟'] ]; var head = n < 0? '欠': &# ...
方法一:普通方法12345678910111213141516171819202122232425<script> function numFormat(num) { var tmp = num.toString().split("."); // 变成字符,然后用“.” 分开小数点前后两个部分为一个数组tmp[0]和tmp[1] // console.log(num); var arr = tmp[0].split("").reverse(); // 变成数组,然后翻转0 // console.log(tmp); var res = []; for (var i = 0; i < arr.length; i++) { if (i % 3 == 0 && i != 0) { // 在3的倍数前先添加“,” ...
123456let endTime = moment();//获取当前时间let startTime = "2000-09-09";//设置之前时间let sum = endTime.diff(startTime, 'months');//获取到相差月份end_date.diff(start_date, 'weeks') // 获取到相差周end_date.diff(start_date, 'days') // 获取到相差月份start_date.diff(end_date, 'days') // 获取到相差天
为什么需要Hook?Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。 class组件相对于函数式组件有什么优势? class组件可以定义自己的state,用来保存组件自己内部的状态; 函数式组件不可以,因为函数每次调用都会产生新的临时变量; class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻辑; 比如在componentDidMount中发送网络请求,并且该生命周期函数只会执行一次; 函数式组件在学习hooks之前,如果在函数中发送网络请求,意味着每次重新渲染都会重新发送一次网络请求; class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等; 函数式组件在重新渲染时,整个函数都会被执行,似乎没有什么地方可以只让它们调用一次; 所以,在Hook出现之前,对于上面这些情况我们通常都会编写class组件 Class组件存在的问题 复杂组件变得难以理解: 我们在最初编写一个class组件 ...
React核心成员(Redux的作者)Dan Abramov也有对应的回复 https://github.com/facebook/react/issues/11527#issuecomment-360199710 总结: 1、setState设计为异步,可以显著的提升性能; 如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低的; 最好的办法应该是获取到多个更新,之后进行批量更新; 2、如果同步更新了state,但是还没有执行render函数,那么state和props不能保持同步; state和props不能保持一致性,会在开发中产生很多的问题