Rechal_Mei-优快云博客

原创 vue 实现pc,h5拖拽悬浮挂件，附带吸边效果

c分清clientY pageY screenY layerY offsetY的区别在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进行了解才可以继续实现我们的拖拽效果clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY 指的是距离它自己左..

2021-07-08 18:38:17 3249 2

原创 uni-app 解决iPhoneX 小黑条适配问题

在入口文件 app.vue的css里加入view { // 解决刘海屏 // margin-top:20px; // margin-top:calc(constant(safe-area-inset-top)); // margin-top:calc(env(safe-area-inset-top)+20px); //解决小黑条 padding-bottom: constant(safe-area-inset-bottom);...

2020-12-28 10:43:52 1600 2

原创（uni-app/vue）H5通过webview嵌入到原生IOS/Android页面，如何传参交互？

前言：这里主要描述H5的操作方式H5给原生传参：ios：window.webkit.messageHandlers.sendData.postMessage(params);android:window.android.sendData(params);//sendData 为原生调用的变量名，params为H5中给原生传递的相关参数案例如下：H5调用原生提供的方法：ios：window.webkit.messageHandlers.toUserDetails.pos...

2020-12-28 09:51:31 1653 1

原创实现自定义扫码，uni-app

uni-app ,实现自定义扫码（plus.barCode）,解决低版本安卓设备首屏加载黑屏，提升优化加载速度支持扫码二维码，一维码，文章下方有GitHub完整案例代码看看效果图先可以打开设备摄像头，扫码速度，扫一扫速度极快，非全屏扫码可以自定义高度值GitHub有完整案例在此看看实现的扫码的核心代码吧<template></template><script> var barcode = null; export default .

2020-09-14 13:43:39 5412 7

原创 canvas实现保存超出屏幕之外的内容

画布生成课程表画布画出来，然后保存到本地简述：先说一下，实现目标。so,上图因为，项目需求，需要把动态的课程表，实现点击保存按钮，实现将如上图一样的课程表保存到本地。那么，实现的思路就是：画布画出来，然后保存到本地开发框架：uni，开发工具：Hbulid-X，既然有了思路，那么就好办了吧,我把课表分成了四个部分去画1.左边的时间2.顶部的场馆信息+底部的照片3.底部的日期显...

2019-07-06 13:20:39 3271

原创已知一个日期，获取该日期所在周7天数组

js 已知一个日期，获取该日期所在周7天数组getWeekDay(dateString) {//得到一个日期，计算出这个日期所在周的7天的日期 let dateStringReg = /^\d{4}[/-]\d{1,2}[/-]\d{1,2}$/; if (dateString.match(dateStringReg)) { let presentDate = new...

2019-06-21 20:47:33 563

原创关于多图上传照片

前言纯属是笔记，复用性太高，前后端封装的上传的多图方法看一下效果图index.html <view class="imgs"> <block wx:for="{{ imgs }}" wx:key="{{ index }}"> <view class="img-box">

2019-02-20 10:34:56 717

原创关于小程序上传录音，播放录音功能。

前言因项目开发需求，在创建名片的时候可选择上传语音，播放语音。所以写这博客是我之前也没有写过录音的部分。记录笔记关于文档录音全局变量const recorderManager = wx.getRecorderManager()//创建录音返回值 recorderManagerconst innerAudioContext = wx.createInnerAudioCo...

2019-02-20 10:18:05 3374

原创小程序Scroll-view上拉滚动刷新数据

小程序Scroll-view上拉滚动刷新数据因为项目需求，我需要做一个上拉刷新，但是我不是小程序的原生刷新生命周期函数事件小程序scroll-view，有一个滚到底部触发事件bindscrolltolower加粗样式把自己需要滚动的内容放在这个scroll-view之间，然后。给scroll-view一个滚动高度首先先看一下效果图吧order.wxml页面 <scroll-...

2019-01-05 10:09:15 3484

原创小程序缓存----缓存用户在不同页面选择的多个对象

首先，我们项目需求，用户需要选择车的品牌–>品牌对应下的系列–>系列下对应的车型–>车型下对应的年份。那么一共就是要给后台传递用户选择的四个值，但这四个值是依次选择的，有一个依赖关系，不能跨列选择。所以，我就用缓存的方式来缓存用户依次选择的值。但是，四个值用缓存肯定得用一个对象来装这四个值**我这里用的是同步和异步(自己给自己挖了一个坑)，再最后一个值的时候，同页面数据...

2018-12-22 16:30:22 858

原创小程序选项卡以及swiper套用（跨页面）

选项卡tab和swpier之间的套用其实我之前写过一篇选项卡的切换demo，大家阔以参考一下小程序多个选项卡切换那今天写这个demo呢，是因为项目需求，所以仅供参考。我是拿到了home.wxml的数组下标，通过url传参的方式去将这个id传到下一个页面，下一个页面接收以后再将id赋值给对应的tabI或者currentId（swiper 的下标）实现上一个页面进来以后直接进入对应的页...

2018-11-07 18:34:20 3393 5

原创小程序背景音乐

小程序背景音乐我做这个项目的需求，用到一个背景音乐的播放和暂停；当用户点击进入音乐界面的时候用户需要手动点击播放对应的音乐，那么播放以后推出音乐界面这个音乐还是处于播放状态，以及音乐的图标的状态也一个是播放。so看看代码吧！首先看一下我的目录结构我的照片放在了images里。主页面是ceshi.wxml ，音乐播放界面是index.wxml开始上菜，ceshi.wxml...

2018-11-02 10:24:45 2630

原创小程序canvas画雷达图

首先，我们先看一下效果图雷达图（Radar Chart），又可称为戴布拉图、蜘蛛网图（Spider Chart），是财务分析报表的一种。即将一个公司的各项财务分析所得的数字或比率，就其比较重要的项目集中划在一个圆形的图表上，来表现一个公司各项财务比率的情况，使用者能一目了然的了解公司各项财务指标的变动情形及其好坏趋向。这边文章参考了https://www.jianshu.com/p/59...

2018-11-01 19:28:23 2058 2

原创小程序用view画圆

画多种圆效果图test.wxml<view class='wrpg-top'> <view class='clike'> <view class="element"> <view class="child"> <view class="childw"&amp

2018-11-01 18:19:49 3771

原创小程序二次循环，嵌套循环

嵌套循环 test.wxml<view wx:for="{{test}}" wx:key="" class='onearr'> <view>姓名：{{item.name}}</view> <view>学校：{{item.school}}</view> <view>年纪{{ite

2018-10-29 09:42:00 4074

原创小程序官方文档地区三联动选择

在小程序没有更新中国picke组件的时候，全靠手动全写地址选择，先看看效果图现在小程序有了强大的picke地址选择器wxml<view class="section"> <view class="section__title">省市区选择器</view> <picker mode="region" bindchange=&qu

2018-10-25 19:16:40 310

原创地址选择三联动，js

首先看看效果图选择地址以后，自动显示出来index.wxml <view class="infoText" bindtap="translate">{{province}} {{city}} {{county}}</view> <view class="animation-elemen...

2018-10-25 19:14:36 1474

原创小程序表单认证布局及验证

tset.wxml<view class='form'><view class='content'> <view class='left'>姓名：</view> <view class='right'> <view class='right-left'> <input plac...

2018-10-18 09:57:47 1062

原创小程序多个选项卡切换（商品评论）

选项卡的功能用途有很多地方：例如商品评论的切换，还有文章分类还有各种各样的切换功能需要用到。这个实现是通过for循环，取数值下标的方式来实现切换test.wxml<view class='content'><view class='tab {{idx == index? "type-item-on" : ""}}' data-index='{{index}}' c...

2018-10-18 09:25:04 1252

原创小程序三个页面之间传参

三个页面的传递参数，这一次我想实现的事我在后台取到的数据，展现在A页面传递到B页面展示，B传递到C页面展示。主要思路：A到B先把B页面的值取出来并setdada出去然后在从B传单C。主要代码：test.wxml <view class='tiyan' style="background-image: url('{{clock_im...

2018-10-12 16:39:39 644

原创小程序页面传参（多个参数）

小程序页面传递参数这一次讲一下，跨页面传值和在下一个页面接收值，接收以后并渲染展示出来。那么请看清楚我这提到的步骤1.A页面传值，传多值到下一个页面2.B页面接收上一个页面传输过来的值；3.在B页面渲染接收到的数据那么直接上代码，先看看我想实现的效果。首先我想实现把这个test页面的值传递单下一个test-1页面去。先看一下我的页面结构我需要传递这个test页面的标题，参与...

2018-10-10 12:20:20 6021

Rechal_Mei的博客