- 博客(41)
- 收藏
- 关注
RSS订阅原创 Object.freeze()冻结对象
用处：1、一个大的数据对象里，在你确信它不需要改变的时候，你可以给他freeze()，可以大大的增加性能。2、也可用作冻结线上的配置文件中的对象，以防有人误改。const nums = 6;nums = 7; console.log("num==",num);const 声明一个常量，一旦声明，常量的值就不能改变，报错Uncaught TypeError: Assi...
2019-12-19 20:01:28
918
原创 uni-app中组件间方法调用
在此总结下，供参考！一、先上结果图，如下：二、项目说明红色圈起来的为子组件，绿色圈起来的为父组件。uni-app项目，所以具体组件引入流程不在详细说明，直接列出代码。三、代码1、子组件child.vue<template> <view class="" @click="getFatherMethod"> 点击调用...
2019-12-16 10:46:06
11615
原创 富文本/整段文本中右侧无法对齐的问题之text-align: justify(css)
今天的重点是：text-align: justify（实现两端对齐）对于整个段落，用的最多的要数富文本（作用于商品详情页），但用正常的形式排下去，右边的效果就像小狗啃了一般，参差不齐。所以应该如何修饰呢？要使文本两端沿着它的外边线对齐，可用text-align: justify；再配合letter-spacing设定一个恰当的间距来达到理由的效果，使得排版更美观。letter-spacin...
2019-11-01 17:55:44
2538
原创 1upx border在某些手机机型上某一边框显示不出来解决方案
今天在做uni-app项目进行测试时，发现当边框为1upx时，某些框的边显示不全（无效）。自己某前遇到问题的手机：iPhone XS Max。展示的bug效果如下：以上区域中，发现边框的下边没有显示出来。又是兼容问题导致的bug。于是网上去查找了一些资料，大致归类为以下几种。1、将边框样式写在“行内样式”中，即以style的形式嵌在标签中。亲测无效，对于我的项目。大家可以针...
2019-11-01 17:05:29
1262
原创 uni-app自定义弹窗，底部页面触摸穿透问题解决方案（精华）
在uni-app中，弹窗的用途很常见，比如商品规格选取、广告弹窗等。在实际开发中，有时候我们需要在页面中有这样一个弹窗，但弹窗会导致触摸穿透的问题。这样带来的效果很不好，所以，在进行手动滑动时，我们需要在弹窗弹出后禁止原页面继续滚动。一、解决触摸穿透的方法： 在网上看到最多用的方法是：在最外层的view上添加如下代码：<view class="" @touchmove...
2019-10-30 17:57:12
13441
8
原创 uni-app中全局变量Vue.prototyp与globalData不同及其注意
uni-app全局变量实现手段可以算是各式各样，今天只针对Vue.prototyp与globalData实现全局变量的注意事项。一般数据比较小时，我们会用Vue.prototyp与globalData挂载与存储全局变量，在页面中调用及其更改。但是，有时，我们需要从App.vue中进行值的更改，比如接收另一个小程序传过来的信息，此时只能在App.vue中的onLaunch()或onShow()方...
2019-10-16 18:11:30
3537
1
原创 JavaScript中对数组与对象数组进行排序
一、对数组进行排序：sort()我们知道，在js中，我们可以采用sort()方法对数组进行排序，但是它并不是万能的，下面就具体剖析下：1、sort()方法说明该方法以字母顺序对数组进行排序，如下：let fruits = ["Banana", "Orange", "Bpple", "Mango"];fruits.sort();fruits // ["Apple", "Bana...
2019-08-07 19:21:33
856
原创 ES6中将多维数组转换为一维数组之flat()
JavaScript中如何将嵌套的数组"拉平"变成一维数组?这个功能在实际项目中，还是用到的比较多。实际项目中也遇到过，所以今天就在这里做个总结，方便后续拓展~看到网上好多资料是通过join() / oString()方法结合split()方法进行转换，但是这样最终得到的是一个字符串数组。有时我们原本的数组成员并不是字符串类型的。不想处理后改变数组成员类型。那此时我么可以用ES6中给出...
2019-08-07 19:03:33
9090
3
原创 ES6之Array.of()、Array.from()与iterator迭代器
一、ES5中创建数组1、创建方式// 第一种：对象字面的方式let arr1 = [2, 4]arr1 //[2,4] // 第二种：new Array() / Array()的方式let arr2 = new Array(2, 4); //<=>let arr2 = Array(2,4)arr2 //[2,4]2、说明：最好使用[]来创建，...
2019-08-06 18:21:07
631
原创 ES6中数组复制与合并
ES6扩展符...在数组中的应用扩展运算符:采用...，将一个数组转为用逗号分隔的参数序列。即更直观的可以称为展开符，eg:对let a = [1,2,3],...a 结果 1,2,3 将数组里面的东西直接展开放在此处一、复制数组在ES6之前，对于数组的复制我们通常是通过“=”或concat来实现；我们先来定义两个数组let arr1 = [1, 2, 3],...
2019-08-05 19:58:42
1204
原创 微信小程序/uni-app中自定义顶部导航栏
一、项目目录结构说明：1、components目录用于存放自定义组件，bar是一个自定义组件，封装了小程序顶部自定义导航栏。 1>由于顶部导航栏大多页面都需要，所以最好封装成一个组件，直接引入，这也就引发了第二个需求。 2>有时，在一个项目中，有些页面的导航栏可能不一样，所以此时我们应该尽可能的考虑到需求，然后封装，在页面更改值来达到不同...
2019-07-30 15:07:33
26689
4
原创 uni-app/微信小程序video组件层级过高覆盖悬浮按钮
uni-app/微信小程序video组件层级过高覆盖悬浮按钮：一、出现的概率与场景具有偶然性，即概率性出现，也针对一些手机，尤其在ios版本的一些手机上！二、分析：大体分析说明：一般的解决方法是采用原生组件cover-view，有图片的话再结合vover-image。但是，一般的悬浮按钮是相对于手机屏幕进行固定的（即不会随着划动被移动），如果采用cover-view...
2019-07-30 11:16:16
13000
1
原创 wx.request请求封装（微信小程序/uni-app）
距离做完项目很久了，腾出点时间，记录下。为了提高效率与可维护性，对其进行了一个简单的封装~一、目录结构二、三步骤1、第一层封装（config.js）分别针对get与post进行一个公共wx.request请求的封装；每个方法传了2个参数,url与data;url:接口地址,data:请求的参数,const commonUrl ="https://ceshi.com...
2019-07-26 15:03:57
5615
6
原创 swiper轮播图息屏一段时间或快速滑动切换时出现疯狂抖动
gitHub代码下载：https://github.com/Syleapn/uni-app-swiper以前做小程序项目的时候，没专门测试人员，都是开发者自测，可能我的手机性能比较不错（哈哈）或时机不对，总之没发掘到这个bug；近期做项目，测试了不同的手机，发现在一些手机上会出现这个bug,尤其是对于性能差的一些手机，出现的概率尤其的大。由于本次项目是基于uni-app的，直接就用uni-ap...
2019-07-26 13:06:21
4477
1
原创 小程序自定义组件与uni-app组件间传值异同总结
微信小程序与uni-app组件间传值总结（此处是常见传值规律总结，除过特殊的，就像this.selectComponent）1、父组件向子组件传值 --- 》通过数据绑定2、子组件向父组件传值 ----》通过事件一、父组件向子组件传值 相同点:都是通过数据绑定的方式进行 不同点:小程序中子组件通过properties进行映射,即接收;...
2019-07-25 19:07:47
4612
原创 uni-app中组件传值
一、父组件向子组件传值通过props来实现，子组件通过props来接收父组件传过来的值！1、逻辑梳理父组件中：第一步:引入子组件；import sonShow from '../../component/son.vue';第二步:在components中对子组件进行注册；components: { sonShow },第三步:以标签的形式载入；通过数据...
2019-07-25 18:21:13
32142
6
原创 小程序自定义组件间传值
一、父组件向子组件传值即WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体请看https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html1、流程梳理：父组件f...
2019-07-25 15:49:21
11162
2
原创 ios与android上小程序跳转兼容实现与封装
项目中遇到的坑，在这里记录下：一、需求： 在进行微信小程序分享时进行跳转，这个跳转有三种情况：小程序之间的相互跳转、外链、链接；所以，接口中请求的数据有三种类型，用type标记，我这里只是给个流程记录下，没有接口也行，自己去模拟一个，重点是遇到的两个坑以及解决方案！坑一： 在ios上,分享时,直接进行了广告跳转(外链跳转/链接跳转/小程序跳转弹窗)，微信好友列表没有了或...
2019-07-25 11:53:56
470
原创 微信小程序引用页面调用组件内的方法（父组件调用子组件的方法）
近期在做一个项目，小程序普通页面调用引入组件里面的方，网上看了很多资料，还是被粗心的自己给整哭了。所以做完项目记录下：一、demo结构1>页面index2>自定义组件tx二、如何定义一个组件在tx.json中将component设置为true，即三、引入组件（在index页面引入自定组件tx）1>在index.json中进行组件声明2...
2019-07-04 00:13:18
17409
1
原创 uni.pageScrollTo滚动时出现抖动问题
uni-app中，将页面滚动到顶部，有两种方式：一、使用scroo-view标签中的@scrolltoupper实现二：使用uni.pageScrollTo实现近期在做视频类的一个重播功能，要求点击“重播”按钮后页面能够回到顶部（由于视频在页面的顶部，这样点击“重播”后不会跳到视频之外的其他地方），用uni.pageScrollTo来实现，但是发现三个问题：...
2019-06-02 19:34:29
8019
1
原创 swiper与scroll-view对比（实现水平slider）
小程序中实现滑块水平滑动最常用的手段是：通过scroll-view去实现；但是，通过scroll-view实现的滑动可能有时并不是我们想要达到的效果，那么，还可以通过swiper组件来实现，通过下面可进行同一个功能细节处不同的展示~一、通过scroll-view实现滑块滑动二、通过swiper是实现滑块滑动wxml:<!-- ******************* scro...
2019-05-20 19:58:41
3530
原创 vue中v-cloak最详讲解
一、在vue中，渲染普通文本有2种方式：{{}}与v-text，如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
2019-04-14 15:49:44
5359
2
原创 小程序中对应详情页的传值
######## 2018.7.30/18:46 ######### 上一篇博文中已明了e.target与e.currentTarget的区别，详情点这里查看https://blog.csdn.net/syleapn/article/details/81289337 本篇会用得到它们的~ 下面进行今天的重点，页面传值的方式很多，我尽可能的通过实例列出，欢迎大家的补充~...
2018-07-30 19:08:40
5057
5
原创 小程序中e.target与e.currentTarget区别详解
在小程序中，e.target与e.currentTarget是非常重要的，尤其是涉及到页面传值时！本节只说两者的区别，关于传值下一节再详细讲解>https://blog.csdn.net/Syleapn/article/details/81290133#comments~下面开始正文啦！！先来大概梳理下逻辑，以便引申与更一步了解target与curentTarget。...
2018-07-30 18:10:31
34168
11
原创 uni-app中文本过长-实现折叠与展开效果
在实际的开发中,疑或是页面的预览中,或多或少都碰到过这样的情景,那就是文本的折叠与展开!近期在做一个项目，也遇到此情况，就将此顺便总结下来~一、先上效果二、源码<template> <view class="wrap"> <!-- --> <view class="fload" :class="isFload...
2018-07-07 18:47:44
17390
8
转载 关于小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题
关于浮动，有好几种方法，所以对于scroll-view的水平滑动，一不小心就会出错。解决方法：转摘自：https://www.cnblogs.com/miu-key/p/7606024.html小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分，在这次项目中刚好需要用到横向滑动，但在测试过程中发现横向滑动没有了效果（静止在那里没移动过），经调试发现：1.scroll-vie...
2018-04-28 22:10:57
1254
转载 关于小程序 input 组件内容显示不全（显示的长度不满 input 宽度）问题
今天在做表单的提交，其中input框出现了一个诡异的问题，就是内容显示不全（显示的长度不满 input 宽度），用前愆訾的文章解决，地址http://www.cnblogs.com/miu-key/p/7168933.html。感谢博主~转载自：前愆訾的博客，文章地址为：http://www.cnblogs.com/miu-key/p/7168933.html正文！！！问题：小程序的input组件...
2018-04-23 22:08:25
10535
4
转载 encode后的JSON字符串，JSON.parse解析失败
转自：闪电Jlaix的微信小程序大坑：encode后的JSON字符串，JSON.parse解析失败今天，遇到微信 JSON 解析的一个大坑。网上找了好久，没有人记录过相同坑，所以写下来吧。跨页面跳转，想传递一个对象。于是先将对象，用 infoStr=JSON.stringify(object)转为了字符串。由于对象中包含 url 属性，JSON.parse 方法无法解析包含“？“、”&”之...
2018-04-14 15:06:49
3970
转载 IE浏览器中img标签不显示图片
转摘自:gonghao2014的https://blog.csdn.net/GongHao2014/article/details/52779603/也感谢博主,解决了我的问题以及总结~一、问题描述浏览器< img … /> 标签不显示图片二、示例演示<!-- 代码部分 --><html> <head> <meta c...
2018-04-10 17:46:25
11316
1
原创 小程序的text-overflow
text-overflow原本是CSS3的一个属性。在微信小程序中也支持。下面我们一步步的进行~text-overflow文本溢出显示省略号~注：使用text-overflow时，需要设置固定的宽度才起作用，所以该元素必须具有块状元素的属性（款装元素+行内块状元素）1、一行文本溢出显示省略号 overflow: hidden; white-space:nowrap; text-overf...
2018-03-27 14:49:54
7986
原创 border-radius的一种经典使用(上凸边框）
对于border-radius，大家应该都很熟悉->为元素添加圆边框。所以，此处不在讲解border-radius的语法，不懂的戳这里，http://www.w3school.com.cn/cssref/pr_border-radius.aspw3cschool讲的很详细~下面我就利用border-radius添加圆边框这个功能实现以下效果-》向上凸出的弧线（红色线）-》此效果利...
2018-03-22 17:22:30
3212
原创 详解微信小程序swiper小圆点默认样式改变
在微信小程序中，轮播图上的小圆点默认样式为黑灰色，这在视觉体验上不是很惊艳眼球，有时达不到我们的需求。那么，怎样进行默认样式的改变呢？需要准备的东西：3张图片（swiper1,swiper2,swiper3）~为了方便大家理解代码以及本地图片的引入，这里把我的文件结构也show~一、方法1采用官方提供的swiper属性(indicator-color与indicator-active-color)...
2018-03-19 18:13:18
36096
7
原创 小程序中textarea字数限制与计算
不管做什么类型的项目，几乎都会碰到评论框。正好也是项目需要，就顺便来总结总结：在以往的前端中，大家都知道很容易实现。那么，在小程序中，如何去实现它呢？其实，只要你仔细看了官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html也很容易，思路如下：1、在textarea中绑定bindinput事件。2、通过var va...
2018-03-19 14:33:17
16491
1
转载 display:none和visibility:hidden的区别
转载自新浪博客->最初的你,文章地址：http://blog.sina.com.cn/s/blog_51048da7010185io.htmlvisibility和display两个属性都有隐藏元素的功能，display:none和visibility:hidden的区别，简单的总结一句话就是：visibility:hidden隐藏，但在浏览时保留位置；而display:none视为不存在，...
2018-03-17 15:30:55
1073
转载 详解Html替换元素与非替换元素
前部分转载自：详解HTML行内置换元素与非置换元素的区分一般情况下，行内元素只能包含数据和其他行内元素，除非你可以对css进行更改，那就可以另说了。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。 以上只是个大概的说法，具体都某些特定的元素这条规律不一定适用~通常我们的认识是这样的：一、行内元素b, big, i, small,...
2018-03-16 20:24:24
3666
2
转载 视觉格式化模型中的各种框
首先，感谢博主doyeo（CSS探索之旅）！转载自doyeo（CSS探索之旅）的视觉格式化模型中的各种框，具体戳这里->视觉格式化模型中的各种框在聊这个话题之前，我们可能得先简单说说 视觉格式化模型 这个概念。视觉格式化模型 的全称是 Visual formatting model，它被用来描述用户代理（比如浏览器）在图形媒体下如何处理文档树。在 视觉格式化模型 中，每个文档树的元素会根据框...
2018-03-16 15:17:12
888
转载 微信小程序 wx:key
原作者：哈尔滨的酸柠檬转载自：http://blog.csdn.net/sinat_31177681/article/details/53557642在实际开发过程中遇到 warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance.上网查找资料与查看官方文档发现原因大致如下：官方解释：wx:key...
2018-03-16 10:35:04
691
转载 CSS进阶系列一（flex布局基础知识——介绍、规范、主要思想、专业术语）
首先，感谢博主的总结，转载自微信小程序club茂茂，地址：http://www.wxappclub.com/topic/735下面正式：一、介绍flex是flexible box的缩写，意为弹性布局。flexible box是CSS3新增加的，用来为盒模型提供最大的灵活性。 1.flex旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。...
2018-03-15 10:30:58
514
原创 微信小程序点击控件修改样式
通常，页面呈现的效果，我们直接在css中进行，可是有时我们需要进行通过一系列操作比如点击后，要使得样式进行改变。我们知道微信小程序也可以使用一些伪类进行这类操作样式的改变，比如hover等。毕竟小程序是基于数据驱动的，也为了便于后续修改与维护，我们利用数据绑定来实现它。******第一种方法******one->进行布局wxml：<view class="mn">点击样式改变&l...
2018-03-14 17:20:39
19283
3
原创 微信小程序中遮罩层的实现
近期在写一点小东西，碰到遮罩层，今天把它总结下来，方便大家共同学习：有好几种方法，今天先来第一种。准备工作：一张图片：close.png一、方法1先上效果：点击“核算”以后，遮罩层出现，同时conts（即面板）出现。再次点击“核算”或conts右上角的关闭按钮时，遮罩层消失，conts隐藏。源码：wxml代码<vi...
2018-03-13 20:40:34
38002
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人