uniapp
荀鼠不是鼠
不快乐但充满生机
展开
-
vue:如何通过两个点的经纬度进行距离的计算(很简单)
赤道半径,从地球中心到赤道的距离,大约6378.137km;RE,地球半径,有时被使用作为距离单位, 特别是在天文学和地质学中常用,大概距离是6370.856km;由于地球不是一个完美的球体,所以并不能用一个特别准确的值来表示地球的实际半径,不过由于地球的形状很接近球体,用[6357km] 到 [6378km]的范围值可以涵盖需要的所有半径。所以我们通过地球半径进行计算的时候,通常情况下,我们可以使用上面的每一个值都可以进行计算,不过或多或少都会有误差的,但这样的。首先有一个概念需要说一下。原创 2024-04-16 15:33:44 · 324 阅读 · 1 评论 -
uniapp:小程序腾讯地图程序文件qqmap-wx-jssdk.js 文件一直找不到无法导入
或者导出的名称与导入的名称不匹配,也会引发错误。官方的和我这里本地小程序导出方式不同我这里需要export default QQMapWX;导出而不是官方的module.exports = QQMapWX;在使用腾讯地图api时无法导入到qqmap-wx-jssdk.js文件。然后导入:这里是我的路径位置,可以根据自己的路径位置进行更改导入。解决方法:1、打开qqmap-wx-jssdk.js最后一行。文件存在,但并未正确导出。原创 2024-04-02 14:17:17 · 958 阅读 · 0 评论 -
uniapp小程序:使用uni.getLocation通过腾讯地图获取相关地址信息详情(超详细)
先看运行结果:流程:搜索后点击这里已经有账号的就进行登录,没有账号的进行注册即可点击控制台:进去后点击成员管理---->我的应用---->创建应用输入相应的参数应用名称(随便写)和应用类型更具你的项目类型进行选择我选择了出行选择好后点击创建:创建好后点击添加key:打开微信小程序开发工具:这样就获取到了key:微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)下载其中一个都可以解压后放在common目录下皆可,如果没有common路面自己生成即可。在微信小程序后台小程序 (qq.co原创 2024-03-15 11:34:49 · 1448 阅读 · 0 评论 -
uniapp:小程序数字键盘功能样式实现
在uniapp中直接运行即可。原创 2024-03-10 20:22:46 · 773 阅读 · 0 评论 -
uniapp小程序:内存超过2mb解决方法(简单)message:Error: 上传失败:网络请求错误 代码包大小超过限制。
1、Hbuilder中点击运行-->运行到小程序模拟器--->运行时是否压缩代码。分析:这种情况是代码文件内存超过2mb无法进行预览上传。3、点击预览即可运行了。原创 2024-01-26 11:18:48 · 1490 阅读 · 0 评论 -
uni-app小程序:文件下载打开文件方法苹果安卓都适用
以确保它们在传输和处理过程中不会被误解或错误解析。这样可以避免因特殊字符导致的错误或安全问题。特殊字符转换为它们的UTF-8编码表示形式。encodeURI函数将URI中的。点击文件1就可以下载打开文件预览了。原创 2024-01-20 17:38:09 · 1482 阅读 · 0 评论 -
uni-app小程序 uni.showToast字数超过两行自动省略显示不全问题
在实际开发过程中如果用户提交某些文件时,如果缺少某些条件我们要提醒用户缺少那些条件才能提交,但是如果我们用。的时候就会导致文字显示不全,达不到提醒的效果,这种时候我们就需要使用。uni.showToast提醒的次数超过7个字。uni.showModa显示态弹窗。原创 2024-01-18 10:47:55 · 2182 阅读 · 0 评论 -
uniapp:如何将返回标根据下滑的距离而改变颜色
在项目过程中我们会遇到这种情况:返回标和背景颜色重合导致无法看见的情况,这里有一个简单的方法可以实现这个api会实时监听你鼠标向下滚动的距离,直接写在vue2:methods中即可。vue3直接写在setup函数中就可以了如图所示:来看看运行效果:原创 2024-01-12 14:13:07 · 584 阅读 · 0 评论 -
vue:ref的作用和实例
ref的作用主要是:获取页面的DOM元素(样式、位置、文本等)、获取子组件的对象(也是一种通信方式)原创 2023-12-22 10:52:09 · 546 阅读 · 0 评论 -
vue中keep-alive的使用
keep-alive是vue中内置组件,无须引入或者下载插件,直接可以引用,且可以保存组件的状态不被销毁,从而保证组件中所有的内容状态得以保留。原创 2023-11-27 10:31:39 · 410 阅读 · 0 评论 -
uniapp:如何实现点击图片可以全屏展示预览
这个需要使用uniapp中的api:uni.previewImage,使用方法如下。这样就可以实现照片的预览和全屏展示了。原创 2023-11-22 11:07:53 · 2130 阅读 · 0 评论 -
在uniapp和微信小程序中onshow和onload的区别
优先级:onload>onshow,onload先触发,onshow后触发。onLoad:页面加载时调用,可以获取参数,通过options,但是。简单来说就是页面显示时调用(启动/页面从隐藏到启动),可调用多次。"onShow"生命周期函数在页面显示或从后台切换至前台时触发。它适合处理需要在页面显示时进行的操作,例如更新数据、启动定时器等。每次页面显示或从后台切换至前台时都会调用"onShow"。在uni-app框架中,是两个页面级别的生命周期函数。onLoad"适合进行页面初始化操作”原创 2023-11-09 18:05:05 · 1030 阅读 · 0 评论 -
vue中如何给后端过来的数组中每一个对象加一个新的属性和新的对象(不影响后端的原始数据)
如果是数组中每个对象新增属性就用map遍历每个对象加入新增的属性,如果是给数组插入新的对象就使用push或者unshift总头或者尾部插入对象。原创 2023-10-26 16:53:58 · 1663 阅读 · 0 评论 -
Vue(uniapp)父组件方法和子组件方法执行优先顺序
涉及到的知识点:钩子函数mounted和created的区别:先看问题,父组件从后端通过$ajax获取数据,在将父组件将值传输给子组件,使用子组件使用created钩子函数获取数据,按自己的想法应该是父组件先获取后端数据,在传入给子组件,可是事实是,子组件先获取数据,父组件在从后端获取数据,这样的话子组件就没有数据获取为空。解决方法:将子页面中钩子函数created变成mounted调用type函数方法,这样就可以让父页面的函数先运行获取后端数据,在吧数据传入子页面,子页面获取数据在输出。原创 2023-10-25 17:59:32 · 1268 阅读 · 0 评论 -
vue:父子通信传递,如何将父页面的数组传入到子页面(弹窗)
示例中的路径和组件名称可能需要根据您的项目实际情况进行修改。同时,您可能还需要安装和引入相应的组件库或自定义组件,以便使用弹窗和其它功能。组件),并将父页面中传递过来的时间数组作为子页面的属性传入。父页面包含一个按钮,点击按钮后会显示一个底部弹窗(使用。弹窗中包含了子页面(接收并遍历展示时间数组。原创 2023-10-24 09:51:53 · 240 阅读 · 0 评论 -
uniapp在列表渲染中实现字符的截取和背景颜色的改变
我们发现,每一个字符串前两位字符都会在正方形盒子中出现,且这个盒子的颜色顺序和刚才使用的color数组中的顺序一致。substr方法,0表示从字符串下标0开始,2表示字符串下标2结束,不包括2,[0-2)所以是获取两个字符。在列表渲染中将对象中代表字符那一串属性写在template中,这里是name。所以获取的是response的下标index。默认样式为class=“boxhe”原创 2023-10-17 17:21:07 · 382 阅读 · 0 评论 -
vue:如何是列表渲染后的数组点击每一个对象每个对象盒子和每个对象的图片发生变化,点击另外一个对象,之前点击的对象盒子和图片样式还原,新点击的对象盒子和样式发生改变
然后遍历这个数组,当i等于idnex时将对应的元素背景变成‘#e5e5e5’,通过定时器设定一个延迟时间为0.15s,当延迟时间结束后背景颜色恢复为空(这个不要也可以),将图片判断的属性showimg=true,从而达到切换图片的作用。第二个红线是包裹图片的盒子,只要点击this.activeIndex=index,那么红线的判断式就成立,从而改变图片包裹的盒子的样式,从灰变绿,原创 2023-10-14 17:28:46 · 109 阅读 · 0 评论 -
如何调用api接口获取数据
这个函数的作用是获取账单列表。根据传入的数据参数,使用request库发送GET请求,访问指定的接口地址`/yoga/store/factory/******/******`来获取账单列表数据。4、通过async关键词声明BliiList()是一个异步函数用来执行网络请求后端的数据,通过await来等待异步任务的执行结果,然后赋值给data,最后输出data。2、然后再api目录下创建一个js文件用来,我们这里创建的是bill.js。1、首先看接口的地址,和接口的类型(post还是get类型)原创 2023-10-13 17:59:57 · 193 阅读 · 0 评论 -
onload和onshow的区别、async与await之间的关系以及异步函数的概念
页面初始化工作一次性数据页面跳转时传递的参数。原创 2023-10-11 11:04:33 · 3445 阅读 · 0 评论 -
通信方式(父传子)
分类管理原创 2023-10-10 09:23:48 · 64 阅读 · 0 评论 -
使用uniapp如何实现查询重复名字并且提升功能
data() {return {{ name: '对象1', image: 'image1.jpg' },{ name: '对象2', image: 'image2.jpg' },{ name: '对象3', image: 'image3.jpg' },{ name: '对象4', image: 'image4.jpg' },{ name: '对象5', image: 'image5.jpg' }],methods: {// 名字为空,给出提示title: '请填写名字',});原创 2023-10-08 10:37:15 · 204 阅读 · 0 评论 -
uniapp:如何在数组中添加新的对象和删除对象,以及更改对象中的属性(vue)
'':''}}删除</button></li><input v-model="newItemName" placeholder="请输入新对象的名字"><input v-model="newItemImage" placeholder="请输入新对象的图片"><button @click="addItem">添加</button>原创 2023-09-26 20:48:31 · 4254 阅读 · 0 评论 -
通过uniapp实现实时监控input框输入字数
原理:通过v-model双向绑定inputvalue记录输入的值,在使用一个变量 isExceedLimit来判断是否超过了最大的限制标志位,通过computed监听inputvalue的变化。将inputValue.length的长度赋值给count,通过isExceedLimit = count,如果超过3,由于isExceedLimit时布尔类型,相等即为真为true,,可能大家有疑问为什么是大于3而不是4呢,因为记录inputvalue的值是从0开始的,0-3一共有4位所以实际就是判断4位字符了。原创 2023-09-22 09:57:09 · 1700 阅读 · 0 评论 -
使用uniapp写一个列表渲染将内部有弹窗,可以通过弹窗写入input文本,点击确定,从而对在列表中新增对象
的图片地址,通过push方法将。原理通过获取input中。原创 2023-09-20 16:31:57 · 233 阅读 · 0 评论 -
uniapp:列表渲染下tap切换底部滑动块效果实现(vue)升级
原理:先在父级盒子中的container的样式中加入position: relative;在横条从横条的样式中加入position: absolute;让横条在父级盒子底部,然后设置transition: left 0.5s;让向右滑动的效果持续0.5秒,然后在html页面中通过。这样得话是不是就看起来丝滑很多下面得横条是直接从第一个盒子滑动到第二个盒子。:代码中的这些部分是自定义组件,需要区components目录中进行注册才行。),在JavaScript中通过列表渲染的每个盒子的下标index。原创 2023-09-15 18:00:23 · 201 阅读 · 0 评论 -
使用uniapp在列表渲染的数字键盘中给每个键位写入点击事件点击改变颜色0.15s后有还原成原来的颜色且不使用:class
再写数字键盘的时候遇到了一个问题就是我已经通过:calss渲染了不同键位的样式,但是点击键位为了和用户有交互,那么点击时改变颜色就显得比较重要了,但是以及使用了:class了在使用一次改变样式的话就是报错,所以这次改变键位样式且0.15s恢复的这个功能将不使用:class来实现使用:style来实现。使用uni-app编写一个列表渲染,其中包含三个元素,并实现点击其中一个元素时改变其颜色样式,同时不使用。主要是实现不使用:class的情况下也能实现盒子样式的改变。指令渲染列表,并为每个元素绑定单击事件。原创 2023-09-14 09:24:17 · 387 阅读 · 0 评论 -
tap切换如果有5个元素但是只需要点击4个元素产生颜色变化,第五个元素不需要颜色变化怎么实现?
这里我们可以看见因为我们判断的元素是id所以id最大只能是i-1(i=4)也就是3,但是index没有别判断所以任然可以等于数组长度的最大值index=4,这样的话点击筛选的时候就可以触发别的点击事件比如弹窗等,不会受到id条件的限制从而无法触发事件,(前提使用index来进行触发而不是id)。原创 2023-09-12 15:02:19 · 65 阅读 · 0 评论 -
通信方式子传父实例(自定义组件的值传入父页面)
这个的话目前遇到的分为两种情况,一种是数组类型的也就是列表渲染的属于传的值数组属性,另外一种是不是列表渲染的属于对象属性。原创 2023-09-11 17:11:56 · 60 阅读 · 0 评论 -
父子组件通信的实例
平时老是听说通信方式,经过这几天的实际操作也明白了一些怎么操作的情况,下面就引入一个实例进行操作后面会的方法更多了后也会更新更多的实例操作如果有错的地方还望大佬指正:先看主角这几个页面。原创 2023-09-08 16:43:28 · 156 阅读 · 1 评论 -
如何将一个页面的数据以数组的形式传递到另外一个页面
方法一:列表渲染的情况下:通过json.stringify将数组转化成对象。B页面:通过json.parse来获取对象。原创 2023-09-05 20:19:44 · 324 阅读 · 1 评论 -
使用uniapp(Vue3)通过列表渲染点击盒子改变里面的图片和盒子样式且只能点击别的盒子时才能返回原来的样式和图片,重复点击本身也改变不了自己的样式和图片
这个的话直接上代码:先是temp部分。原创 2023-09-04 21:44:09 · 124 阅读 · 1 评论 -
底部tap切换同一个盒子只能单击一次,多次点击不会出现效果,只有点击另外一个盒子才能触发点击事件
重复点击同一个盒子是不会改变图片的样式的,比如重复点击第二个盒子,isBoxSelected就一直等于false,但是第二个盒子是取反的!isBoxSelected,所以等于true,第二个盒子就是蓝色图表。因为默认选中的是第二个所以刚开始第二个盒子中的isBoxSelected: true, 第一个 isBoxSelected: true,原创 2023-09-04 16:51:38 · 151 阅读 · 1 评论 -
使用uniapp使用列表渲染和tap切换实现点击盒子的效果
script>data(){return{activeIndex:0,//索引box:[boxs:[id:'1',text:'一月'},id:'2',text:'二月'},id:'3',text:'三月'},id:'4',text:'四月'},id:'5',text:'五月'},id:'6',text:'六月'},id:'7',text:'七月'},id:'8',text:'八月'},id:'9',text:'九月'},id:'10',原创 2023-09-03 15:13:39 · 229 阅读 · 0 评论 -
uniapp:JavaScript基础点击盒子让其变色然后再还原回原来的颜色
这样就可以点击后变色然后通过定时器setTimeout设置0.15秒后返回原来的颜色即可完成这个操作。原创 2023-08-26 09:48:55 · 413 阅读 · 0 评论 -
如何实现横向滑动以及文字长度超过盒子长度时用...代替的实现Vue、css
在实际开发过程中我们会遇到从右往左的滑动效果还不是从上到下的滑动效果,比如:那么这种效果是怎么实现的呢直接上代码选择门店">">">">">原创 2023-08-07 10:07:31 · 259 阅读 · 1 评论 -
点击图标使其变色vue
这里的重点就是给class弄一个判断通过判断showCodeone的false或true来确定是否更换样式,给showCodeone的初始值是false,所以样式是.img-default的灰色,当点击以后showCodeone变为true样式变成 .img-active所以就达到了点击变成橙色的效果,嗯~ o(* ̄▽ ̄*)o如果不理解的话可以复制粘贴代码运行一下试试,图片在阿里云盘上面的所以可以实现的。这种情况的实现也很简单只是样式中的文字的样式喝边框样式color、border改变了代码如下所示。原创 2023-08-04 09:56:08 · 345 阅读 · 0 评论