<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ffan1的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ffan1</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ffan1]]></copyright><item><title><![CDATA[94. scrollIntoView使用]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/113666231</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/113666231</guid><author>ffan1</author><pubDate>Thu, 04 Feb 2021 22:55:00 +0800</pubDate><description><![CDATA[94. scrollIntoView
			// 跳转到指定题目
			goToQuestion: function(item){
				var vm = this
				vm.jumpPage(item.page)
				var key = '#' + item.item_sn
				setTimeout(function(){
					$(key)[0].scrollIntoView(true)
					// document.getElementById(item.item_sn)
			]]></description><category></category></item><item><title><![CDATA[【读书笔记】高性能JavaScript：最小化重排和重绘]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/113666175</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/113666175</guid><author>ffan1</author><pubDate>Thu, 04 Feb 2021 22:52:30 +0800</pubDate><description><![CDATA[【读书笔记】高性能JavaScript：最小化重排和重绘
当浏览器下载完所有组件后，会生成两个树： DOM树和渲染树，DOM树描述的是节点的结构，而渲染树则描述DOM树如何展示，所以DOM树的变化会影响渲染树。
当我们的DOM操作影响了元素的几何属性，比如说宽高。浏览器会使渲染树中受影响部分失效，并且重新构造渲染树，这个过程叫做重排，重排结束后，浏览器会重新渲染受影响部分内容到屏幕，这过程叫做重绘。
而重排和重绘都会造成严重的性能消耗。
解决这部分问题主要有三种方式：
1、改变元素的display属性，从文]]></description><category></category></item><item><title><![CDATA[87. 小程序跳转方法封装]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/109612585</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/109612585</guid><author>ffan1</author><pubDate>Wed, 11 Nov 2020 09:48:18 +0800</pubDate><description><![CDATA[小程序跳转（简版）
js
// 跳转方法封装
	jump(e) {
		const vm = this
		let session_id = wx.getStorageSync('session_id')
		if(!session_id){
			wx.navigateTo({
			  url: '/pages/login/login',
			})
			return false
		}
		let tabbar = ['/pages/index/index', '/pages/pintuan/ind]]></description><category></category></item><item><title><![CDATA[86. 小程序中的form表单提交]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/109612556</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/109612556</guid><author>ffan1</author><pubDate>Wed, 11 Nov 2020 09:47:16 +0800</pubDate><description><![CDATA[86. 小程序中的form表单提交
js
// 获取表单的值
	formSubmit(e){
		const vm = this
		let postData = e.detail.value;
		postData.location = vm.data.region.join('')
		postData.user_id = 1
		wx.showLoading()
		addAgent(postData)
			.then(res =&gt; {
				wx.hideLoading()
			}).c]]></description><category></category></item><item><title><![CDATA[79. 基于Vue的视频播放器]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/108800668</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/108800668</guid><author>ffan1</author><pubDate>Fri, 25 Sep 2020 17:10:41 +0800</pubDate><description><![CDATA[79. 基于Vue的视频播放器
功能：自定义播放器样式，可播放，可快进，可后退
audio的常用的属性

controls 。如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，样式由浏览器决定。
currentTime。当前音频已播放时长。
duration。当前音频总时长。
preload。预加载，这是一个枚举属性，none表示不做预加载，metadata表示会对元数据(比如音频时长)做预加载，auto表示会尝试对元数据以及音频柳做完全预加载。
src。音频文件的地址。
playb]]></description><category></category></item><item><title><![CDATA[82. 微信H5授权登录]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/108800625</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/108800625</guid><author>ffan1</author><pubDate>Fri, 25 Sep 2020 17:08:34 +0800</pubDate><description><![CDATA[H5端微信登录
简介
公众号H5端网页的微信授权登录
根据开发者文档，大致可分为四步。
1 第一步：用户同意授权，获取code
2 第二步：通过code换取网页授权access_token
3 第三步：刷新access_token（如果需要）
4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
完整的流程需要上述四步，但是前端页面只实现第一步和第四部，即获取code和使用code获取用户信息
官方文档： https://developers.weixin.qq.com/doc/off]]></description><category></category></item><item><title><![CDATA[安装谷歌插件]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/107577150</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/107577150</guid><author>ffan1</author><pubDate>Sat, 25 Jul 2020 12:52:46 +0800</pubDate><description><![CDATA[安装谷歌插件
下载插件
这里以下载油猴为例
推荐下载地址：

解压后：

谷歌安装插件报错
这个时候很大概率会报错，显示无法安装插件

将图中的 .crx 文件后缀修改为zip
重复安装插件步骤，将我们.zip文件解压后的文件引入即可

修改后缀：

安装插件：

这样就大功告成了，记住千万别把插件的文件夹删除，否则插件也无法使用。

...]]></description><category></category></item><item><title><![CDATA[69. 取消form表单提交默认enter事件]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/107419203</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/107419203</guid><author>ffan1</author><pubDate>Fri, 17 Jul 2020 22:26:58 +0800</pubDate><description><![CDATA[69. 取消form表单提交默认enter事件
备注： 给项目修bug时发现form表单的input提交方法包含一个默认enter提交事件，导致原本作为iframe内部的表单提交发生了我们意料之外的交互，于是需要清除这个默认事件，看了一些资料之后发现也很简单，只需要一个类型为text的input标签即可让默认事件失效，但要谨记，这个input的标签只能有type这个属性，否则无法停止默认事件。
使用空的input事件
&lt;input itype="text" style="display:none" /]]></description><category></category></item><item><title><![CDATA[67. input标签上传文件样式]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/107419126</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/107419126</guid><author>ffan1</author><pubDate>Fri, 17 Jul 2020 22:22:04 +0800</pubDate><description><![CDATA[67. input标签上传文件样式
备注 在平时使用input标签上传文件时，我们往往不需要使用它的默认样式，但是也往往很难修改它的默认样式，所以只能通过 将input标签覆盖在我们的按钮上，然后将input标签设置定位脱离文档流，并将透明度调为零解决。
html代码
&lt;div class="m-btn" v-if="{$operationArr.uploadFile} == 1"&gt;上传
    &lt;input type="file" id="fileupload" :data-tmtid=]]></description><category></category></item><item><title><![CDATA[68. 清除input上传文件路径]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/107419037</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/107419037</guid><author>ffan1</author><pubDate>Fri, 17 Jul 2020 22:18:20 +0800</pubDate><description><![CDATA[清除图片上传后的路径
备注： 项目发现通过input type=file 上传文件，通过onchange方法绑定方法，却无法重复上传同一个文件，原因是上传文件后input标签的value值未改变，所以没有触发事件。
修改： 由于开发框架是基于JQ的，所以利用jq选择对应input标签并清除其内容达到可以上传同名文件的目的。
html代码
&lt;div class="m-btn" v-if="operationArr.uploadFile == 1"&gt;上传
    &lt;input type="fi]]></description><category></category></item><item><title><![CDATA[12.  点击跳转公众号文章]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/106878433</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/106878433</guid><author>ffan1</author><pubDate>Sat, 20 Jun 2020 22:02:05 +0800</pubDate><description><![CDATA[点击跳转到公众号文章
js判断

//页面跳转（是否跳转到）
	jump: function (e) {
		const vm = this;
		let url = e.currentTarget.dataset.url
		let mp_url = e.currentTarget.dataset.mpurl
		if (mp_url) {
			wx.navigateTo({
				url: '/pages/article/webview/webview?url=' + mp_url,
			})
	]]></description><category></category></item><item><title><![CDATA[40. 清除小程序button默认样式]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/106878350</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/106878350</guid><author>ffan1</author><pubDate>Sat, 20 Jun 2020 21:59:14 +0800</pubDate><description><![CDATA[清除小程序button默认样式-联系客服
&lt;button open-type="contact" class="clearBtn"&gt;
	&lt;image class="image" :src="$util.img('upload/uniapp/member/xunima-ne.png')" mode="aspectFill" /&gt;
	&lt;text class="text"&gt;我的客服&lt;/text&gt;
&lt;/button&gt;

.clearBtn{
	margin]]></description><category></category></item><item><title><![CDATA[41、文本溢出处理]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/106878308</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/106878308</guid><author>ffan1</author><pubDate>Sat, 20 Jun 2020 21:54:10 +0800</pubDate><description><![CDATA[文本溢出处理
文本溢出处理-单行
.f-txtof {
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
}

文本溢出处理-两行
.f-txtof_2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:]]></description><category></category></item><item><title><![CDATA[scroll-view使用]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/106740658</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/106740658</guid><author>ffan1</author><pubDate>Sun, 14 Jun 2020 00:16:34 +0800</pubDate><description><![CDATA[小程序官方组件scroll-view使用
横向滚动
在 scroll-view 横向滚动的时候遇到了一点麻烦，就是不管怎么设置scroll-view，但是scroll-view横向滚动就是不生效，看了很多教程，基本围绕着三个点来说。

1、设置组件属性scroll-x，直接写上scroll-x或者scroll-x="true"都可以。
2、设置组件css ：white-space: nowrap;
3、设置组件宽度
其他的更是五花八门
但是我逐个试了，有的有效，更多的是无效的。

于是我是用成功案例，逐..]]></description><category></category></item><item><title><![CDATA[前端编程常见快捷方式]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/105595243</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/105595243</guid><author>ffan1</author><pubDate>Sat, 18 Apr 2020 11:10:31 +0800</pubDate><description><![CDATA[快捷方式前端编写快捷键复制和粘贴注释enter键加强版删除行总结
前端编写快捷键
前端编程中有许多的快键方式可以极大的帮助我们编程，其他的语言我不太清楚，但想来是差不多的，一些编辑器中默认的快键方式操作，可以让你的编程变得更加优雅，我们的目标是：减少鼠标的操作。
复制和粘贴
你还在用鼠标选中，然后右键复制粘贴？
不不不，在IDE中你完全不需要，你直接将光标放置在要复制粘贴的行，然后Ctrl+C然后...]]></description><category></category></item><item><title><![CDATA[微信小程序页面之间的通信]]></title><link>https://blog.youkuaiyun.com/ffan1/article/details/105339521</link><guid>https://blog.youkuaiyun.com/ffan1/article/details/105339521</guid><author>ffan1</author><pubDate>Mon, 06 Apr 2020 11:34:44 +0800</pubDate><description><![CDATA[微信小程序页面之间的通信前言1、使用url后面加参数的形式通信2、利用缓存通信3、使用globalData全局变量通信4、使用外部引入js文件通信总结
前言
在前端开发中，组件之间的通信往往是老生常谈的话题，在小程序开发中也包含多种页面之间的通信方式，在这里做个笔记。
1、使用url后面加参数的形式通信
在跳转页面的时候在url的后面添加需要传递到新页面的参数，并且在新的页面中的onlocal生命...]]></description><category></category></item></channel></rss>