Boo_crob-CSDN博客

原创商品详情页的级联滚动

实现效果：点击tab中的选项，页面上下滚动到指定位置页面滚动的指定位置，tab也选中指定的选项解决思路：先给指定的位置，各添加一个唯一id，（方便后续使用 uni.createSelectorQuery().select(’#’+that.idname).boundingClientRect(function(res) 定位到我要的id位置），并在data添加一个idname变量比如说我的样式代码//这里是我的tabs切换选项卡 current双向绑定当前所在下标， tabChan

2021-08-13 15:33:10 1194

原创 uni-app中页面传值传递对象类型参数[object,object]

我在百度的时候看到几篇很好的文章，分享一下uni-app页面传值传递对象类型的数据和微信小程序（uni-app）url参数传递对象本来clog传递后的参数，是[object,object]，很费解。后来用了作者的JSON.parse(decodeURIComponent(option.item));方法后还是报错，goGoods页面kefuOrder(){ let obj = { name : this.goods.name, price : this.goods.price,

2021-01-06 15:55:25 10446

原创解决uni-app 底部输入框，键盘弹起时页面整体上移问题

我在聊天系统和评论区域都遇到过软键盘把页面顶上去的问题，做聊天系统的时候废了牛鼻子劲才解决页面上移问题，这次做评论功能的时候又遇到了，我觉得以前的方法太麻烦了，想找一个简单的方法，仔细翻读uniapp文档的时候发现了一个属性adjust-position ：Boolean类型，作用是键盘弹起时，是否自动上推页面来源，uniapp官方文档发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize这个softin

2021-08-13 13:59:40 13580 1

原创 app中，实现下滑页面到一定高度，显示自定义导航栏

在uniapp官方文档的框架中有关于页面的生命周期找到onPageScroll 生命周期，他的一个参数是scrollTop，即页面垂直方向已滚动的距离(单位px)逻辑处理过程是：先定义一个布尔类型的变量，来控制自定义导航栏的显示与隐藏，当垂直方向页面滚动到一定高度（这里设滚动到100px时）后，即大于100px，则显示自定义导航栏，否则，隐藏导航栏。//在data中定义布尔类型变量data() { return { isShowNav: false, }}，//页面的生命周期onPa

2021-07-06 17:36:01 1591

转载 uniapp中引用echarts图表

uniapp中使用echart图表参考文档：花归去 https://blog.csdn.net/weixin_42120669/article/details/106123645文章里的内容超级详细，请认真阅读哦！其中，关于echarts.min.js存放位置，作者建业放在static，如果你们想放在别的地方也是可以的，只要更改页面代码中的echarts.min.js的位置就行！！！！散会！！！！！！！！！！！！...

2021-07-06 17:13:26 654

原创基于vue-cli的less的安装和配置使用以及解决less-loader版本过高问题 ---- 超简单篇

// @colors: #aa8866;// #app {// margin: auto;// .less-test{// background-color: @colors;// }// }

2021-06-22 12:11:18 3656

原创基于uniapp的聊天系统，在接收到消息的时候播放提示音乐

我先说我的文件结构和代码类型。应用了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: .

2021-05-12 10:53:38 1918

原创基于uniapp的聊天系统，在H5端实现按下回车键即发送消息

在uniapp框架中很少用到键盘回车键发送，但有时候也会使用。这次我的uniapp需要打包H5版本，就会用到键盘回车方便一点。1.在对应的样式标签中写一个键盘发送的方法confirm-type=“send” @confirm="doSend"//这里的e指的键盘事件传递的参数,text是绑定的输入框的内容doSend(e, text) { console.log(text); if (e.ctrlKey && e.keyCode === 13) { //用户点击了ctr.

2021-05-12 10:29:23 2931 1

原创基于uniapp做的聊天系统中，使用scroll-view实现下拉加载查看消息记录

关于这个下拉加载查看消息记录，我尝试了很多方法。下面我来理理有过的想法思路1.我查找uniapp官网，找到有一个生命周期类型的方法，叫：onPullDownRefresh() ，比如一次读取10条消息记录，而我的页面只能显示五条，当我读完第十条消息想要下拉加载信息的时候，发现加载的消息会跳转至第20条消息，以至于我的消息不是紧接着我上一条读的信息，这样就给用户带来极差的体验感。思路2：想用onPullDownRefresh() 结合跳转至指定消息下标一起使用。比如说，我想让其每次下拉加载都跳转至第.

2021-05-11 18:19:35 6726 23

原创 uniapp中使用socket IO

用socket io 来完成实时通信。首先先安装socket 依赖在控制台中输入以下任意一个命令行。这里我用的第二种npm install vue-socket.io --savenpm install socket.io-client --save配置文件安装完成后创建一个仓库在默认路径下与static同级创建一个store文件夹，文件夹下有index.js。index.js中用于写各种vuex中的逻辑问题import Vue from 'vue'import Vuex fr.

2021-05-06 17:49:54 11374 2

原创基于uniapp做的聊天系统中，使用scroll-view实现动态滚动到最底部

这里提到两个方法方法一：用整个scroll-view的高度减去所有聊天内容的高度，得到的就是滚动条需要下拉的距离，即可使聊天页下拉至最底部。参考文章：《uni-app 之聊天室滚到最底部》方法二：利用uniapp中的scroll-view组件的scroll-into-view属性具体使用方法请参考官网文档第一种方法：将聊天框封装成组件，并判断是谁发送的信息首先要给聊天内容部分封装成一个组件（不封装也可以），将组件中的对方和自己用v-if做一个判断，当接收的用户名（或者id，只要是唯一.

2021-04-30 18:33:22 10230 2

原创分享在做vue项目时遇到的几个比较好的网站 vue导出EXCEL表格和 vue中使用富文本编辑器

https://www.tiny.cloud/get-tiny/language-packages/ 中文语言包

2021-04-24 10:19:28 277

原创基于vue的后台管理内容篇之代理列表(某一导航项) 前篇

上一篇中已经设置到点击某一导航项，跳转至对应路由组件页面这一篇写组件页面中需要应用到的一些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 计步器表格布局 <!-- 面包屑.

2021-04-06 14:55:58 212

原创基于vue的后台管理之首页 -- 侧边栏导航

侧边栏可以拿后台接口数据，也可以自己编写。这里我是自己编写所需侧边栏信息应用到element中的el-menu、el-submenu、el-menu-item布局<el-menu default-active="activePath" // 当前激活菜单的 index background-color="#323744 " //导航栏背景颜色 :collapse-transition="false" //是否开启折叠动画 unique-opened //是否只保持一个子.

2021-04-06 10:37:18 2368

原创基于vue的后台管理之后台管理首页---头部导航

在搭建项目前篇中提到，没有接口就先做首页，有接口就尽量从登录页面开始做。这一步。我到了首页界面的搭建应用到element中的布局容器组件首页布局<el-container> //头部导航 <el-header class="nav"> <el-image :src="img" class="avatarImg" :fit="fit" ></el-image> <span class="pStyle">后.

2021-04-03 17:34:17 854

原创基于vue的后台管理之登录界面搭建前篇

登陆界面的大体框架和细节整改首先，先看主要的框架搭建，利用form表单，对输入的用户名和密码进行校验布局<el-form label-width="0px" class="" :model="loginForm" ref="formRef" :rules="formRules">  <el-form-item prop="userName"> <el-input placeholder="请输入用户名" v-model="l.

2021-04-03 11:59:13 278

原创基于vue的后台管理之搭建项目前篇（完结）

前言记录做后台管理的时候遇到的一些问题、小知识点以及一些bug目前，项目中界面组件应用到element-ui，请求用到axios，有接口就先写登录界面，完成登录功能，登陆进入首页。没有接口数据，只是简单模拟数据。就写首页界面。首页打开终端执行vue ui 命令行。在打开的ui界面中创建项目创建项目名称配置预设，选择功能配置选择校验规则后，创建完成安装插件和依赖安装vue-cli-plugin-element 插件在开发依赖中安装axios依赖安装less样.

2021-04-03 11:19:53 125

原创 for循环、forEach以及setTimeOut的内部原理区分

从宏观上看，for和forEach都是循环类而setTimeOut是定时器，类似于setInterval下面我来细分一下这三者的内部区分原理，及相像点for循环分析以下代码其async … await 是等待请求，类似ajax，顺着语句顺序执行，等待有await的语句请求完，for循环是同步的，必须一步一步执行，不请求完数据，就不会执行下一步。根据代码我们可以看出执行结果是左侧的：1，2，0。因为for循环中有async请求，所以当遇到await，在for循环中，判断i小于3，要等请.

2021-03-06 11:32:02 1082

原创 upload上传图片之上传多张图片和上传一张图片

前言上传仅能上传一张和上传多张的区别不仅仅在于数量，还在于存放上传图片地址的变量。存放一张的变量是字符类型。多张是数组类型。上传一张图片----------------------参数-----------------------action-----------：图片上传地址header----------：上传携带的头信息，对象形式max-count-----：上传的最大数量file-list-----------：默认显示的图片列表，数组元素为对象，必须提供url属性mult..

2021-03-06 10:13:04 2101 1

原创将选中的阿里图标添加至项目中

据说调用阿里图标有三种方式，可惜我只了解两种，我详细介绍下前两种的方法，第三种我给你们百度到别的博主的文章，下拉第三种方法可以看看。方法一：直接下载图标添加至项目,(如下)打开阿里图标官网，在搜索框中搜索所需图标名称找到合适的图标添加入库，（如果是单张图标，也可以直接下载，在入库的下方有一个下载，选择好所需图标的颜色，点击下载即可。）下载后是个压缩文件夹，解压后，将文件夹里的图标全选复制到所需文件夹下，比如uniapp中的static目录下。（如果是单个图标下载，下载后就是单个图

2021-03-04 10:58:20 514 2

原创基于Vue实战项目：电商管理系统之接口请求失败

我是个前端菜菜，一直在试图改变这个事实。总会犯一些很傻*的错误下面是我在模仿 Vue实战项目：电商管理系统时遇到的问题。我跟着视频中的操作，很顺利地持续到了接口测试。在此之前我已经把数据库导进了我的电脑phpstudy的mysql文件夹中。在我用postman测试接口http://127.0.0.1:8081/api/登录正确的账户，却一直请求失败我就很纳闷。我都把数据库导进来了。你还要我怎样。接着我问了后端的人。他们说：另一个人也说：最后，我领导给我说：你可以访问，就在那个b站的

2021-03-02 18:11:25 688

原创在网页端下载app(apk)的方法

在H5页面下载APP(apk)一般应用的方法是window.location.href = 下载地址downLoad () { this.downAndroid()}async downAndroid() { const res = await this.$http.get('/api/params') if (res.code !==0) { return uni.showToast({ title:res.msg, icon:'none' }) } con.

2021-03-02 15:31:23 5198

原创 uniapp中设置全局变量---vuex仓库

在一些情境下会应用到全局变量，接下来便来定义全局变量会应用到vuex仓库，不了解的可以先看其基础语法，b站关于Vuex的视频链接创建仓库在项目根目录下创建一个名为“store”的文件夹，文件夹里存放index.js文件和moudles文件夹，moudles文件夹中存放一个自定义名称的js文件，这里我叫user.js如图：在index.js文件中写入以下代码 index.js文件import Vue from 'vue'import Vuex from 'vuex'i

2021-03-02 15:20:07 649

原创 web-view和runtime.openURL的方式进行外部链接

web-view在uniapp中用web-view打开外部链接，打开的链接是在浏览器中重新打开的链接，并不能对其进行一系列的操作。而应用runtime.openURL的方法可以用浏览器直接打开链接，而不是像web-view的效果。plus.runtime.openURL(参数一：链接地址link，参数二：打开url地址失败的回调函数参数三：指定打开的url地址的程序名称)代码案例async next() { if(this.entrySort === 1) { const

2021-03-01 14:30:26 1082

原创算法：将一维数组转变为二维数组

在做项目的时候遇到一个将一维数组转为二维数组的问题。应用到的问题是这样的。我需要做一个轮播的一个页面里嵌套着多个item选择项。……说的苍白无力。图↓这个时候需要接收一个二维数组，用swiper嵌套在外面，循环遍历里面的数组。这不是重点……问题在于接口里拿到的是一维数组，如何将一维数组转为二维数组嘞……介里……↓（以uni-app为例）现在data中定义两个列表，一个用于接收接口拿来的一维数组列表，另一个用于存放转成二位之后的数组列表data() { return { //这个是给接口

2021-01-23 11:13:22 1748

原创 Vuex中的核心概念state,getters,mutations,actions

Vuex提供唯一的公共数据源，所有共享的数据都要统一放到store的State中进行存储//创建store数据源，提供唯一公共数据const store = new Vuex.Store({ state:{count:0}})state组件中访问state中的数据第一种方式this.$store.state.全局数据名称组件访问state中数据第二种方式1.从vuex中按需导入mapState函数import {mapState} from 'vuex'通过刚才导入

2021-01-06 15:32:34 116

原创在uni-app中使用uview框架给加载更多组件添加对应功能

首先，要有uview框架内的组件，这里是安装地址 uView官网内下载地址及安装教程。下载完uView-ui组件之后需要对它在项目中进行全局配置，官网中已经讲述的很清晰，这里我就不多说了，uview组件的下载安装方式进行配置。完成这一步骤后，就得在页面中引用uview中的loadmore组件,这里的加载更多组件，官网中也有说明，加载更多组件说明，该文章应用的方法个人觉得考虑的更全面，我是在做项目，项目中应用到很多组件和loadmore组件相附和，所以有些组件在这里必须得显示出来，例如search组件.

2020-12-26 17:55:09 1854

原创 uni-app中轮播图swiper修改指示器样式为数字胶囊式

九宫格grid和轮播图混合应用思路：轮播图嵌套在九宫格外面，详情参考官方文档。https://uviewui.com/components/grid.html领导要求将轮播图的指示器改为：数字胶囊类型，在uview组件的u-swiper组件中有这一属性：mode=“number” 。但是如果里面还要嵌套九宫格grid就不能应用u-swiper组件。此时就需要用uni-app中的swiper进行到这步，我们需要把swiper中的指示器 :indicator-dots 改为false。令他不显示指示器默

2020-12-23 14:13:09 3695 2

原创 These styles are computed, and therefore the ‘visibility‘ property is read-only.“

These styles are computed, and therefore the ‘visibility’ property is read-only."报错原因及处理方法要实现的样式：点击“关注公众号”，弹出遮罩层和二维码图片，此时我的遮罩层可以实现toggle样式，（点击弹出遮罩层，在点击隐藏遮罩层效果）。问题在于图片不显示。↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓，我开始看报错，他说，visibility是只读属性，不能修改。这很奇怪，因为这个属性是一定可以修改的，于是我开始看我的代

2020-12-23 12:55:58 684

原创 Vue学习随笔--搭建脚手架

我在大二的时候才接触到vue，有位很厉害的同学跟我讲vue很简单，特别容易上手，而当时的我学起来非常吃力。现在我大三了，这一次接触到vue觉得真的很容易简单上手。所以我建议在学vue之前因该具备的基础是：html、css、javascript、php、mysql、jQuery。像html、css、js这种比较简单，其中，如果学习了php后再学习vue是非常容易理解里面的路由以及传参等等。我认为初学者学习时遇到的问题非常简单（或者说很幼稚），现在我是边学边记笔记，为了让更多和我频率相同的人更好的理解和参考。

2020-11-27 22:17:58 121

Boo_crob的博客