qq_45967222的博客

转载 【无标题】## uniapp获取底部安全距离以及状态栏高度等等

template>-- 自定义顶部导航 -->-- 页面内容 -->top: 0;bottom: 0;left: 0;right: 0;获取状态栏高度：var(–status-bar-height)

原创 react后台管理项目页面加水印效果

初始化水印，添加load和resize事件。根据使用场景，可配置水印参数。

原创 node版本过高，启动vue项目报错

install完后运行命令行。

原创 微信小程序使用富文本rich-text渲染图片报403错误

就一行代码，-------------.replace(/<img src="/gi, '<img style="max-width:100%;border-radius: 10px;margin:10px auto" src="https://images.weserv.nl/?url=');遇到的问题，做个记录。

原创 微信小程序-思维导图

原创 uni-app自适应刘海屏

uni-app自适应刘海屏在app.vue中可全局引入.titleNview-placing{ height: var(--status-bar-height); padding-top: 44px; box-sizing: content-box;}

原创 小程序自定义组件跳转回来传参改值

之前页面，需要修改UnNum:wx.navigateTo({ url: '/pages/myOrder/myOrder?active=' + active, events: { acceptDataFromOpenedPage: function (data) { console.log(data); that.setData({ UnNum: data, }); }

原创 js中forEach遍历修改数组的值，返回数组使用

截取前每一项：截取后每一项：arr1.forEach((res,index)=>{ res.createTime = res.createTime.slice(0,10);});console.log(arr1);//------做个记录而已

原创 JS比较数组的方法

JavaScript比较数组的方法1、比较两个对象数组，删除重复项，根据属性合并对象我们确实需要比较两个不同的对象数组，并希望在两个对象匹配特定属性值的情况下合并这两个对象。可以使用filter()方法来实现。该filter()方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。让我们创建测试数据:let array1 = [{ id: "50", active: "a", value: 10 },{ id: "51", active: "a", value: 11 }];le

原创 掌握JS的几种空判断（undefined、null、NaN）

判断是否为undefined// 方法一var a=undefined; if (typeof(a) == "undefined"){ console.log("undefined"); }// 方法二var a=undefined;if(a === undefined){ console.log("undefined")}判断是否为nullvar b= null; if (!b && typeof(b)!="undefined" && b!

原创 javascript 字符数组转换成以逗号隔开的字符串

var ids = [];angular.forEach(pulsarServers,function (server) { ids.push(server.id);});ids = ids.join(',');

原创 小程序懒加载数据渲染(有下一页一直加载)--加（节流）--详细注释

由于小程序项目中有懒加载的需求，就网上查阅资料，结合一下完善出来实现效果。效果展示 Rec 0002 节流封装放在utils目录下的新建了一个工具类fz.js(命名有点不规范。。 )fz.js节流封装：/*函数节流*/function throttle(fn, interval) { var enterTime = 0; //触发的时间 var gapTime = i

原创 小程序实现倒计时

page({ data: { }, onLoad: function(){ var that = this; // this 的指向性问题 需要在function 外保存 wx.request({ url: 'xxx', data: {xxx}, success: function(result){ that.setData({ dataSourcesArray: result.data.order // 请求到的数据 }); /**

原创 微信小程序简单实现两列瀑布流布局页面

实现页面瀑布流思路：使用CSS3属性column-count: number|auto;将容器元素分为两列，使用column-gap: length|normal;设置列之间的间隔，使用break-inside: avoid使元素避免出现中断点。效果截图：注意：最重要的需要设置图片mode=‘widthFix’,即设置图片宽度不变，高度自动变换，保持原图宽高比不变。wxml代码：<view class="picture"> <view class="item">

原创 小程序用到的map集合，造的map集合，通过key获取值value数组。

在做分类功能，由点击侧边栏的商品标题来展示里面的商品的这种功能。----由于后端返回的数据，一下子都直接全部返回，我这边就得做判断，点击哪一个侧边商品id的时候，来对应拿到id里面的同一个返回回来的数据。用到了map。返回数据截图解决方法：直接上代码data{ shopSideList:null,//商品侧边 shopContentList:null,//商品内容 mapTwo:new Map()} //分类商品列表 api.classMax().then(re

原创 微信小程序实现抖音切换视频效果

微信小程序实现抖音切换视频效果思路：使用微信小程序的swiper组件，使其竖向滑动分页加载，每次加载3个视频，当滑动到只剩1个视频时加载下一页问题：加载多个视频时，多个视频会同时播放效果图：代码：index.json文件：{ "usingComponents": {}, "navigationStyle":"custom", "navigationBarTextStyle":"white"}**index.wxml文件：**wx:if="

原创 小程序引用vant使用tab标签页active动态设置值

第一个点击页面的wxml点击传的值：第一个点击页面的js点击传的值：OntionText(e){ let active = e.currentTarget.dataset.active wx.navigateTo({ url: '/pages/myOrder/myOrder?active='+active, }) },点击跳转到的页面的wxml:active是初始索引，一定要有name值，才能动态的改索引值。*点击跳转到的页面的js:

原创 小程序实现瀑布流布局

**小程序实现瀑布流**实现效果如图：一：需求分析页面主要分成两列，每个条目的高度不固定，条目主要由封面图+标题+头像+发布者昵称组成多列排列要求，第一条在左侧，第二条在右侧，后续的根据左右两栏的高度，依次放置在高度较低的一侧。二：技术实现思路1、将整个页面分成左右两栏，两侧各对应一个数据集。2、定义变量，记录左右两侧的累计高度，然后依次将条目放置在高度较低的一侧。从而我们可以得到左右两侧的数据集，后续只需要进行页面的渲染就行了；3、图片高度的确定，单个条目中图片宽度=(单列条目宽

原创 小程序使用vant组件uploader完成上传回显

**一、限制个数为1：选择图片后先上传，后回显，具有删除功能**1.wxml <van-uploader file-list="{{ fileList }}" max-count="1" bind:after-read="afterRead" bind:delete="delete" />2.jsdata: { fileList: [], //需要上传图片的列表 }, afterRead(event) { const { file } = e

原创 微信小程序自定义头部tabBar中判断iphoneX刘海头部，并自适应

xml<!-- 头部内容填充 --><!-- 人造头部 --><view class="h-false" style="height:{{statusHeight + navHeight}}px;padding-top:{{statusHeight}}px"> <view class="false-main" style="height:{{navHeight}}px"> <view class="main-nackTo">