- 博客(35)
- 收藏
- 关注
RSS订阅原创 uniapp ios端使用fixed定位导致输入时页面滚动简单解决方法
当移动端使用fixed定位自定义nav栏时，安卓端正常固定在可视窗顶部，但是ios端当有input输入，弹出软键盘时，会将nav顶出可视区，因为在ios上，不是相对于浏览器窗口定位的，而是相对于最近的可滚动区，所以就会导致软键盘弹出时，跟随内容一起滚出去了。
2024-03-22 10:46:30
789
1
原创 js 实用宝典(各种改变数据,检查数据)
####1. 替换object对象的键名:答: JSON.parse(JSON.stringify(data).replace(/keyName/g, ‘name’))注：data为数组，keyName为修改前的键名，name为修改后的键名1、JSON.stringify()把json对象转成json字符串；2、使用正则的replace()方法替换属性名；3、JSON.parse()把json字符串又转成json对象。####2. 时间匹配:例: 2021-01-21 11:17:33 正则
2022-05-05 16:33:11
913
1
原创 uniapp h5、app获取经纬度、地址
1 安装vue-resource, 因为h5请求会跨域,我们需要安装这个插件 cnpm install vue-jsonp --save 或 npm install vue-jsonp --save 根据使用的包管理器来2 main.js文件中引入vue-resource并通过命令Vue.user()使用该插件import VueJsonp from ‘vue-jsonp’Vue.use(VueJsonp)3 创建一个文件,开始写功能,我是创建了一个工具文件夹utils放在indedx.j
2022-04-13 09:49:07
2700
7
原创 uniapp图片上传组件
<!--子组件--><template> <view> <view class="content"> <view class="imageBigBox" v-for="(item,i) in imageList" :key="i"> <image style="width: 100%;height: 160rpx;" @click="previewImg(item)" :src="item"></image&
2022-04-11 11:07:39
2032
原创 echarts折线图数据配置
引入echarts在 链接 选择 dist/echarts.js，点击另存至项目,保存为 echarts.js 文件。项目内引入(这里用html文件举例,框架是vue)//引入刚才下载的echarts.js文件<script src="/assets/js/echarts.js"></script>使用 <div ref="myChart" style="width: 100%;height: 400px;"></div>me..
2022-01-12 10:20:52
1175
原创 uniapp 、vue 显示后端返回的二进制流图片
uniapp: this.$request是自己封装的 uni.request函数,responseType也需要写入封装函数,具体见uniapp请求封装<template> <view> <!-- 显示图片的位置--> <image :src="QRImg"></image> </view></template><script> export default {
2021-09-10 11:18:13
3325
2
原创 vue 语音提醒
原理: 轮询或websocket接收服务器返回的数据,当请求有新的消息数据返回时,我们就播放一段MP3<script>import music from '@/assert/music.mp3' //引入音乐文件mounted(){//轮询获取服务器数据 window.setInterval(() => { this.onHaveInform() }, 10_000);},methods:{//请求 async onHaveInform()
2021-09-10 11:16:26
556
原创 微信小程序 自定义tabbar (会话客服) Vant
要实现的效果: 在写项目的过程中,可能会遇见ui设计会话客服放在tabbar上的情况,但是会话消息必须通过button触发,然鹅小程序的默认tabbar层级最高,没办法再上面添加button事件,这时,我们就需要实现一个自定义tabbar, 我用的是Vant ui组件库,其它的也行,主要原理就是tabbar上放一个按钮,挡住原本的tab就行啦!Vant 小程序官网(一定要是小程序版本的哟,之前引入了vue版本的,实现不了,排查了好久问题)小程序自定义tabbar官网教程第一步://app.json
2021-09-10 11:12:02
1474
4
原创 uniapp 二次封装uview组件,父组件控制显示隐藏
在我们开发uniapp时会用到uview的组件,很方便,但项目中可能会对组件进行二次修改,设置成时候自己项目的功能、样式,如果多处需要用到,可能需要进行二次封装,这时候就会涉及到父子传参等问题,这篇文章主要是为了记录解决父组件控制子组件的显示隐藏问题,下面以u-popup组件为例吧!<!--子组件--><template> <view class="payment"> <!-- 弹出框 --> <u-popup mode="bottom" .
2021-07-19 15:56:17
2012
3
原创 实现类别多选,复点取消选择(vue,uniapp)
<template> <view> <view>商品种类</view> <view class="classifyBigBox"> <view class="oneClassify flex" :class="{selectActive:selected[item.id]==true}" v-for="(item,i) in classifyList" @click="onSelectCla..
2021-07-09 14:11:34
380
2
原创 html页面转pdf
最近公司遇见一个新的需求,将原生html页面一键转换成pdf文件,作为一个小白表示很懵,卡在了第一步,引入插件,下面就记录一下详细步骤,兴许以后还能用得上呢~1.下载插件我们需要引入两个插件,html2canvas和jsPdf如果是原生js写的话可以通过script标签引入1.1 引入html2canvas html2canvas官网点击图片中的按钮,右键另存至项目内1.12引入jsPdf jsPdf官网方法1: https://www.npmjs.com/package/jspdf
2021-06-21 09:20:00
354
3
原创 uniapp (上传本地图片、图片预览、转换base64格式、上传音频文件)
/*htnl*/<view class="img_lists"> <image @click="chooseFile" src="../../static/uploadImg.png"></image> //点击这张图片会调起函数//循环coverImg就可以显示小图,点击即可实现预览效果 <image v-for="(item,i) in coverImg" :src="item" :key="i" @click="previewImg(item)"
2021-06-21 09:17:35
1014
原创 小程序开发常见问题解决方法
1 阻止事件冒泡//catchtap替换bindtap<view bindtap='goDetails'> <!-- catchtap:可阻止冒泡事件,这样就不会同时执行两个事件 --> <text class="btn" catchtap='btnClick'>点击操作</text> </view>2 wx.previewImage点击显示大图(放大黑屏解决)//wxml <view class="imgB
2021-03-29 09:33:07
592
原创 Vue常见问题解决方法
####1. v-for渲染本地图片时加载不出来解:数组里面图片的路径要写成如下：image:require('../images/login.png')渲染时:<img :src="item.image" />####2. 跳转详情页,页面传参1.配置路由 :router.js文件import DetailsPagefrom './pages/detailsPage' //引入组件const routers = [ { path:'/details', //
2021-03-26 09:12:31
120
原创 微信小程序上传图片(预览 删除 限制图片大小、张数)
//wxml <button class='button' bingtap="uploadSomeMsg">上传</button> <view class="uploadImgBox"> <view class='smallImgBox'> <block wx:for="{{img_arr}}" wx:key="index"> <
2021-03-26 09:10:41
1997
原创 微信小程序(获取定位)
实现微信小程序定位并不难,但是如果第一次接触的话还是很懵,这里就记录一下,方便自己复习或大家借鉴吧!首先重点有两条:通过微信小程序api: wx.getLocation(Object object)获取当前所在的经纬度; 小程序api详情通过腾讯地图开放平台逆地址解析获取的经纬度,获取真实地标名称; 腾讯地图平台 具体操作:(腾讯地图方面的操作)注册腾讯地图开放平台:申请开发者密钥（Key）：申请密钥 https://lbs.qq.com/dev/console/key/add成功后
2021-01-05 11:27:39
9826
3
原创 学习记录无数问(Vue篇)
一: 监听数组变化,实时更新?<script>methods: { changeArray() { //arr=[1,2,3],这里我们将下标0的数据更新为10 this.arr.splice(0, 1, 10); //方法一 arr=[10,2,3] this.$set(this.arr, 0, 10); //方法二 不常用的方法: $forceUpdate //强制更新的意思 不管数据是否变化 } }<
2020-12-17 11:28:17
668
原创 学习记录无数问(css篇)
一: 行内元素和块级元素?行内:和其他元素在一行,高度,行高,内外边距都不可改变,文字图片宽度不可变,只能包含其他行内元素.块级: 总是新行开始,高度,行高都可控,可容纳其他元素.二: 盒模型?标准盒模型: 宽度=content + padding + border + margin;box-sizing: content-box: 内容(content)会充满整个盒子,如果有边框,内边距就会溢出盒子;box-sizing:border-box: 盒子包含了内边距(padding)和边框(bo
2020-12-01 10:49:57
668
原创 学习记录无数问(js篇)
一: 什么是防抖和节流？有什么区别？防抖: 触发高频事件ｎ秒后函数只会执行一次，但在ｎ秒内高频事件如果再次触发，则重新计时（一般在input获取输入值之类的会使用到）节流：高频事件触发在ｎ秒内，无论触发多少次，都只执行一次（一般用在用户获取验证码，滚动请求数据之类会使用到， 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每ｎ秒发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。）二：JS 异步解决方案的发展历程以及优缺点？回调函数（callback）优点：解决了同步的问题
2020-11-26 15:34:17
718
原创 小程序导出（使用）公共函数，公共数据
小伙伴在刚接触微信小程序开发时，在开发过程中肯定遇到过在多出需要实现同一效果，所以这时候就需要公共函数来简化我们的代码，不然一遍又一遍复写相同的代码，甚是繁琐，那麽怎么导出使用公共函数呢？看看吧~#####1 app.js内的函数，数据app.js文件相当于一个公共文件，不需要将函数导出，只需要在需要的界面引入即可进行使用~app.js:App({ appFun(){ console.log("这是很多页面都需要使用到的函数呀~") } g.
2020-07-15 16:21:09
2225
原创 微信小程序开发（请求后台数据，封装request函数）
今天想记录一下怎么向后台请求数据，将函数进行封装，实现复用~官方的请求方法：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html这是封装好的函数：公共函数async function request(url, { method = 'GET', data } = {}) { wx.show.
2020-07-15 11:33:01
1280
原创 微信小程序（下拉刷新数据）新手向
记录一下困扰自己的一个小问题，也给各位小伙伴一个借鉴呀~在做自己的个人小程序项目时，需要实现用户下拉刷新数据，看了很多教程，都在说用scroll-view来实现，但是自己对样式要求不高，就使用微信自带的吧~实现的效果：#####1 如果需要全局都实现下拉刷新的话，可以在app.json文件，window里面进行配置启用下拉刷新，只有一两个页面不需要下拉刷新的话，就在页面的json文件内配置，关闭下拉刷新开启全局下拉刷新----->app.json：{ "window": { .
2020-07-14 17:56:24
3810
原创 微信小程序（函数传参，传多个参页面跳转）
##1.函数传参：<!--bindtap--事件名；personalCollect--函数名； data-type---参数 --> <text class="flex {{collectType==0?'collectActive':''}}" bindtap="personalCollect" data-type="0">旅行</text> <text class="flex {{collectType==1?'collectActive':'
2020-06-11 13:29:19
2052
原创 微信swiper组件使用遇见的坑(css实现高度自适应)
在开发图片展示类的小程序时，swiper组件是非常好用的，但是其中也有些“坑”，等着你去踩。好啦,我已经踩过了，给各位一个借鉴吧~#####效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0BSu8zg4-1590551408090)(https://upload-images.jianshu.io/upload_images/17596677-6d9e944a38a6b02f.gif?imageMogr2/auto-orient/strip)]##1.使用首先.
2020-05-27 11:51:35
1257
原创 HTTP请求使用示例
fetch 使用//异步请求数据fetch方法async function main() { // async关键字，只能用于function,表示这个是异步函数 // fetch是全局函数，用于发送http请求，接收两个参数 // 第一个参数：地址或一个 Request 对象 // 第二是可选配置参数 let resp = await fetch('http://127.0.0.1:8080/study1/exercise/test.json', { method
2020-05-23 15:43:58
996
原创 微信小程序跳转详情页面
今天，我们要实现如下的效果，进入详情页，获取产品的具体数据。本文请求的数据是本地的，实际开发是要通过ajax请求服务器中的产品数据，为了避免业务代码扰乱视听，只截取了关键代码~1.首先我们需要两个页面，一个首页（就是产品列表页），一个详情页（产品的具体数据页）首页wxml代码：这里举例的是传id到详情页，这样详情页才知道我们需要加载的是哪个产品，也可以传index下标，不过感觉id更靠谱些。(id是你产品列表里面的数据，渲染列表时拿到的) <!-- bindtap绑定的是首页跳转函数， .
2020-05-23 15:41:15
10258
5
原创 微信小程序创建动态class（取下标控制和具体值控制class两种方式）
##1.创建动态classwxml : <view class="collectTypeBox flex"> <!-- 下面collectType是条件， collectActive是动态class名称 --> <text class="flex {{collectType==0?'collectActive':''}}" bindtap="personalCollect" data-type="0">旅行</text>
2020-05-23 15:38:06
2674
1
原创 微信小程序（固定头部，隐藏滚动条）
开发微信小程序时，有时设置页面样式，需要用到头部固定，内容滚动，下面看看怎么做的吧！##方法一：1：固定元素需要固定的元素盒子设置样式：.box{ position: fixed; top: 0; width: 100%;}2：隐藏滚动条父元素设置：.fatherBox{ width: 100vw;height: 100vh;overflow-x: hidden;overflow-y: auto;}滚动条所在的盒元素设置：.songBox::-we
2020-05-23 15:35:16
2049
原创 微信小程序轮播图（适配机型）
1：wxss样式：/* 页面显示图片的框 */.showTableBox { position: relative; width: 100%; height: 180px; overflow: hidden;}/* img图片所在的父元素盒子，有几张img，width就设置百分之几百 */.slideshowImgBox { position: absolute; z-index: 1; width: 500%; height: 1
2020-05-23 15:30:01
1321
原创 小程序应用 WeUi (新手向)
官方链接：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib最近开发小程序，需要用到微信的ui组件，由于自己没好好看文档，不知道官网上引用的“useExtendedLib”是在哪个文件中引用，蠢哭了，搜索了好多教程都是下载代码，手动配置，挺简单，但是使用时路径怎么都不对，报错。回到文档上，其实只要仔细看看，是在全局引用，一切都豁然开朗，下面开始吧！1.在全局jso
2020-05-23 15:24:37
1697
原创 小程序应用iconfont教程
微信小程序引入Iconfont图标（可修改样式）1:添加需要的图标至项目;链接：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.22:下载至本地;3:解压，找到iconfont.css ，更改后缀名为confont.wxss;4:在app.wxss文件中引入（全局文件中引入，路径要正确哦~）/* app.wxss文件 */@import"./iconfont/font_1799731_h63n8jiz5a4//ic
2020-05-23 15:15:13
1031
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人