<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Boo_crob的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Boo_crob</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Boo_crob]]></copyright><item><title><![CDATA[商品详情页的级联滚动]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/119674168</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/119674168</guid><author>Boo_crob</author><pubDate>Fri, 13 Aug 2021 15:33:10 +0800</pubDate><description><![CDATA[实现效果：

点击tab中的选项，页面上下滚动到指定位置
页面滚动的指定位置，tab也选中指定的选项


解决思路：

先给指定的位置，各添加一个唯一id，（方便后续使用 uni.createSelectorQuery().select(’#’+that.idname).boundingClientRect(function(res) 定位到我要的id位置），并在data添加一个idname变量
比如说我的样式代码

//这里是我的tabs切换选项卡 current双向绑定当前所在下标 ，  tabChan]]></description><category></category></item><item><title><![CDATA[解决uni-app 底部输入框，键盘弹起时页面整体上移 问题]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/119673881</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/119673881</guid><author>Boo_crob</author><pubDate>Fri, 13 Aug 2021 13:59:40 +0800</pubDate><description><![CDATA[我在聊天系统和评论区域都遇到过 软键盘把页面顶上去的问题，做聊天系统的时候废了牛鼻子劲才解决页面上移问题，这次做评论功能的时候又遇到了，我觉得以前的方法太麻烦了，想找一个简单的方法，仔细翻读uniapp文档的时候发现了一个属性adjust-position ：Boolean类型，作用是键盘弹起时，是否自动上推页面
来源，uniapp官方文档

发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize
这个softin]]></description><category></category></item><item><title><![CDATA[app中，实现下滑页面到一定高度，显示自定义导航栏]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/118525480</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/118525480</guid><author>Boo_crob</author><pubDate>Tue, 06 Jul 2021 17:36:01 +0800</pubDate><description><![CDATA[在uniapp官方文档的框架中有关于页面的生命周期 找到onPageScroll 生命周期，他的一个参数是scrollTop，即页面垂直方向已滚动的距离(单位px)
逻辑处理过程是：
先定义一个布尔类型的变量，来控制自定义导航栏的显示与隐藏，当垂直方向页面滚动到一定高度（这里设滚动到100px时）后，即大于100px，则显示自定义导航栏，否则，隐藏导航栏。
//在data中定义布尔类型变量
data() {
	return {
		isShowNav: false,
	}
}，
//页面的生命周期
onPa]]></description><category></category></item><item><title><![CDATA[uniapp中引用echarts图表]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/118524971</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/118524971</guid><author>Boo_crob</author><pubDate>Tue, 06 Jul 2021 17:13:26 +0800</pubDate><description><![CDATA[uniapp中使用echart图表
参考文档： 花归去  https://blog.youkuaiyun.com/weixin_42120669/article/details/106123645
文章里的内容超级详细，请认真阅读哦！
其中，关于echarts.min.js存放位置，作者建业放在static，如果你们想放在别的地方也是可以的，
只要更改页面代码中的echarts.min.js的位置就行！！！！
散会！！！！！！！！！！！！

...]]></description><category></category></item><item><title><![CDATA[基于vue-cli的less的安装和配置 使用 以及 解决less-loader版本过高问题 ---- 超简单篇]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/118103772</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/118103772</guid><author>Boo_crob</author><pubDate>Tue, 22 Jun 2021 12:11:18 +0800</pubDate><description><![CDATA[// @colors: #aa8866;
// #app {
//   margin: auto;
//   .less-test{
//     background-color: @colors;
//   }
// }]]></description><category></category></item><item><title><![CDATA[基于uniapp的聊天系统，在接收到消息的时候播放提示音乐]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/116698671</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/116698671</guid><author>Boo_crob</author><pubDate>Wed, 12 May 2021 10:53:38 +0800</pubDate><description><![CDATA[我先说我的文件结构和代码类型。应用了vuex的仓库来链接socket IO  和一些全局的方法和参数。至于vuex仓库是怎么使用的我这里就不过多的描述了。


在仓库中封装socket IO，链接对话框
这一部分代码，我在  聊天系统/《uniapp中使用socket IO》里面有提到过，此处略过
index.js仓库↓↓

import io from '@hyoga/uni-socket.io';
export default new Vuex.Store({
	state: {
		isLoad: .]]></description><category></category></item><item><title><![CDATA[基于uniapp的聊天系统，在H5端实现按下回车键即发送消息]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/116697590</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/116697590</guid><author>Boo_crob</author><pubDate>Wed, 12 May 2021 10:29:23 +0800</pubDate><description><![CDATA[在uniapp框架中很少用到键盘回车键发送，但有时候也会使用。这次我的uniapp需要打包H5版本，就会用到键盘回车方便一点。

1.在对应的样式标签中写一个 键盘发送 的方法confirm-type=“send” @confirm="doSend"
//这里的e指的键盘事件传递的参数,text是绑定的输入框的内容
doSend(e, text) {
	console.log(text);
	if (e.ctrlKey &amp;&amp; e.keyCode === 13) {
		//用户点击了ctr.]]></description><category></category></item><item><title><![CDATA[基于uniapp做的聊天系统中，使用scroll-view实现下拉加载查看消息记录]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/116646672</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/116646672</guid><author>Boo_crob</author><pubDate>Tue, 11 May 2021 18:19:35 +0800</pubDate><description><![CDATA[关于这个下拉加载查看消息记录，我尝试了很多方法。下面我来理理有过的想法
思路1.我查找uniapp官网，找到有一个生命周期类型的方法，叫：onPullDownRefresh() ，比如一次读取10条消息记录，而我的页面只能显示五条，当我读完第十条消息想要下拉加载信息的时候，发现加载的消息会跳转至第20条消息，以至于我的消息不是紧接着我上一条读的信息，这样就给用户带来极差的体验感。
思路2：想用onPullDownRefresh() 结合 跳转至指定消息下标 一起使用。比如说，我想让其每次下拉加载都跳转至第.]]></description><category></category></item><item><title><![CDATA[uniapp中使用socket IO]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/116453248</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/116453248</guid><author>Boo_crob</author><pubDate>Thu, 06 May 2021 17:49:54 +0800</pubDate><description><![CDATA[用socket io 来完成实时通信。

首先 先安装socket 依赖
在控制台中输入以下任意一个命令行。
这里我用的第二种
npm install vue-socket.io --save

npm install socket.io-client --save

配置文件
安装完成后
创建一个仓库在默认路径下与static同级创建一个store文件夹，文件夹下有index.js。index.js中用于写各种vuex中的逻辑问题
import Vue from 'vue'
import Vuex fr.]]></description><category></category></item><item><title><![CDATA[基于uniapp做的聊天系统中，使用scroll-view实现动态滚动到最底部]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/116193909</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/116193909</guid><author>Boo_crob</author><pubDate>Fri, 30 Apr 2021 18:33:22 +0800</pubDate><description><![CDATA[这里提到两个方法
方法一：用整个scroll-view的高度减去所有聊天内容的高度，得到的就是滚动条需要下拉的距离，即可使聊天页下拉至最底部。
参考文章：《uni-app 之 聊天室滚到最底部》
方法二：利用uniapp中的scroll-view组件的scroll-into-view属性  具体使用方法请参考官网文档

第一种方法：

将聊天框封装成组件，并判断是谁发送的信息
首先要给聊天内容部分封装成一个组件（不封装也可以），将组件中的对方和自己用v-if做一个判断，当接收的用户名（或者id，只要是唯一.]]></description><category></category></item><item><title><![CDATA[分享在做vue项目时遇到的几个比较好的网站  vue导出EXCEL表格  和   vue中使用富文本编辑器]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/116056060</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/116056060</guid><author>Boo_crob</author><pubDate>Sat, 24 Apr 2021 10:19:28 +0800</pubDate><description><![CDATA[https://www.tiny.cloud/get-tiny/language-packages/  中文语言包

]]></description><category></category></item><item><title><![CDATA[基于vue的后台管理 内容篇 之 代理列表(某一导航项)     前篇]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/115456278</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/115456278</guid><author>Boo_crob</author><pubDate>Tue, 06 Apr 2021 14:55:58 +0800</pubDate><description><![CDATA[上一篇中已经设置到 点击某一导航项，跳转至对应路由组件页面
这一篇 写组件页面中需要应用到的一些element组件的使用

页面展示


包含的element元素有
el-card,	卡片
el-breadcrumb,	面包屑
el-input,				input输入框
el-row,		el-col,	布局行列
el-table,	el-table-column,		table表格
el-button,				button按钮
el-input-number		计步器
表格布局
 &lt;!-- 面包屑.]]></description><category></category></item><item><title><![CDATA[基于vue的后台管理 之 首页 -- 侧边栏导航]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/115453722</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/115453722</guid><author>Boo_crob</author><pubDate>Tue, 06 Apr 2021 10:37:18 +0800</pubDate><description><![CDATA[侧边栏可以拿后台接口数据，也可以自己编写。这里我是自己编写所需侧边栏信息

应用到element中的el-menu、el-submenu、el-menu-item
布局
&lt;el-menu
 default-active="activePath"    // 当前激活菜单的 index
 background-color="#323744 "	//导航栏背景颜色
 :collapse-transition="false"	//是否开启折叠动画
 unique-opened					//是否只保持一个子.]]></description><category></category></item><item><title><![CDATA[基于vue的后台管理 之 后台管理首页---头部导航]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/115418241</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/115418241</guid><author>Boo_crob</author><pubDate>Sat, 03 Apr 2021 17:34:17 +0800</pubDate><description><![CDATA[在  搭建项目前篇中提到，没有接口就先做首页，有接口就尽量从登录页面开始做。这一步。我到了首页界面的搭建
应用到element中的布局容器组件

首页布局
&lt;el-container&gt;
	//头部导航
  &lt;el-header class="nav"&gt;
      &lt;el-image :src="img" class="avatarImg" :fit="fit" &gt;&lt;/el-image&gt;
       &lt;span class="pStyle"&gt;后.]]></description><category></category></item><item><title><![CDATA[基于vue的后台管理 之 登录界面搭建 前篇]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/115414344</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/115414344</guid><author>Boo_crob</author><pubDate>Sat, 03 Apr 2021 11:59:13 +0800</pubDate><description><![CDATA[登陆界面的大体框架和细节整改
首先，先看主要的框架搭建，利用form表单，对输入的用户名和密码进行校验

布局
&lt;el-form label-width="0px" class="" :model="loginForm" ref="formRef" :rules="formRules"&gt;
	&lt;!-- 用户名 --&gt;
	&lt;el-form-item prop="userName"&gt;
		&lt;el-input placeholder="请输入用户名" v-model="l.]]></description><category></category></item><item><title><![CDATA[基于vue的后台管理 之 搭建项目 前篇（完结）]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/115405535</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/115405535</guid><author>Boo_crob</author><pubDate>Sat, 03 Apr 2021 11:19:53 +0800</pubDate><description><![CDATA[前言
记录做后台管理的时候遇到的一些问题、小知识点以及一些bug

目前，项目中界面组件应用到element-ui，请求用到axios，
有接口就先写登录界面，完成登录功能，登陆进入首页。
没有接口数据，只是简单模拟数据。就写首页界面。首页
打开终端 执行vue ui  命令行。
在打开的ui界面中创建项目

创建项目名称

配置预设，

选择功能

配置选择校验规则后，创建完成

安装插件和依赖
安装vue-cli-plugin-element  插件

在开发依赖中安装axios依赖

安装less样.]]></description><category></category></item><item><title><![CDATA[for循环、forEach以及setTimeOut的内部原理区分]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/114434638</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/114434638</guid><author>Boo_crob</author><pubDate>Sat, 06 Mar 2021 11:32:02 +0800</pubDate><description><![CDATA[从宏观上看，for和forEach都是循环类
而setTimeOut是定时器，类似于setInterval
下面我来细分一下这三者的内部区分原理，及相像点

for循环
分析以下代码

其async … await 是等待请求，类似ajax，顺着语句顺序执行，等待有await的语句请求完，


for循环是同步的，必须一步一步执行，不请求完数据，就不会执行下一步。
根据代码我们可以看出执行结果是左侧的：1，2，0。因为for循环中有async请求，所以当遇到await，在for循环中，判断i小于3，要等请.]]></description><category></category></item><item><title><![CDATA[upload上传图片之上传多张图片和上传一张图片]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/114382921</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/114382921</guid><author>Boo_crob</author><pubDate>Sat, 06 Mar 2021 10:13:04 +0800</pubDate><description><![CDATA[前言
 上传仅能上传一张和上传多张的区别不仅仅在于数量，还在于存放上传图片地址的变量。存放一张的变量是字符类型。多张是数组类型。

上传一张图片

----------------------参数-----------------------
action-----------：图片上传地址
header----------：上传携带的头信息，对象形式
max-count-----：上传的最大数量
file-list-----------：默认显示的图片列表，数组元素为对象，必须提供url属性
mult..]]></description><category></category></item><item><title><![CDATA[将选中的阿里图标添加至项目中]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/114358093</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/114358093</guid><author>Boo_crob</author><pubDate>Thu, 04 Mar 2021 10:58:20 +0800</pubDate><description><![CDATA[据说调用阿里图标有三种方式，可惜我只了解两种，我详细介绍下前两种的方法，第三种我给你们百度到别的博主的文章，下拉第三种方法可以看看。
方法一：直接下载图标添加至项目,(如下)


打开阿里图标官网，在搜索框中搜索所需图标名称




找到合适的图标添加入库，（如果是单张图标，也可以直接下载，在入库的下方有一个下载，选择好所需图标的颜色，点击下载即可。）




下载后是个压缩文件夹，解压后，将文件夹里的图标全选复制到所需文件夹下，比如uniapp中的static目录下。（如果是单个图标下载，下载后就是单个图]]></description><category></category></item><item><title><![CDATA[基于Vue实战项目：电商管理系统 之 接口请求失败]]></title><link>https://blog.youkuaiyun.com/Boo_crob/article/details/114291006</link><guid>https://blog.youkuaiyun.com/Boo_crob/article/details/114291006</guid><author>Boo_crob</author><pubDate>Tue, 02 Mar 2021 18:11:25 +0800</pubDate><description><![CDATA[我是个前端菜菜，一直在试图改变这个事实。总会犯一些很傻*的错误
下面是我在模仿   Vue实战项目：电商管理系统   时遇到的问题。
我跟着视频中的操作，很顺利地持续到了接口测试。
在此之前我已经把数据库导进了我的电脑phpstudy的mysql文件夹中。在我用postman测试接口http://127.0.0.1:8081/api/
登录正确的账户，却一直请求失败我就很纳闷。我都把数据库导进来了。你还要我怎样。接着我问了后端的人。
他们说：
另一个人也说：

最后，我领导给我说：你可以访问，就在那个b站的]]></description><category></category></item></channel></rss>