3 猿来独往

尚未进行身份认证

“永远渴望,大智若愚”(Stay Hungry, Stay Foolish)

等级
TA的排名 3w+

微信小程序之自定义对话框组件弹窗动画

学习微信小程序组件之后,一直都是使用别人的组件开发的,刚看到一篇文章讲解微信小程序自定义组件通俗易懂的开发案例觉得一看就会自己写组件了,真的很棒,感谢原作者的手把手教你实现微信小程序中的自定义组件,自己也添加了一些修改(修改部分样式,添加是否显示“取消”按钮功能,添加弹窗淡入淡出动画,初始化组件赋值操作等一些简单的东西和注释化流程提示)。主要是敲一遍代码学习之后才体会到原理是这样子的嘛,光看文档...

2019-01-24 12:28:29

微信小程序之animation底部弹窗动画(两种方法)

简单分享一下常用语购物车和下拉框(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果。(一)实现效果简单说明一下,只有点击按钮才能出发弹窗(指定位置),弹窗弹出后,只有点击背景灰色区域弹窗才能收回,点击弹窗内容区域(粉红色部分是不能收回弹窗的),自己可以自定义粉红色部分右上角关闭按钮。(二)实现分析需要一个容器为背景色(灰色区域),一个容器为弹窗内容(粉红色区域...

2018-10-30 10:54:59

微信小程序之物流状态时间轴

一个月左右没更新博客了,最近有点懒了哈(工作上真的忙),很多工作上学习到的东西都没有及时分享出来,有点愧疚,不过自己最近一直在收集资料和学习一些新技术,最主要是想要构建自己的前端技术体系和自定义一个前端规范文档,哈哈哈。说重点啦,微信小程序里面开发的商城模板还挺多的,刚好写了一个物流状态的时间轴,简单分享一下哈。(一)实现效果真机测试的结果(图片忘记缩小了)(二)实现分析页面布局拆分:...

2018-10-25 16:08:43

CSS之实现图片叠加的层叠层问题

在工作中,也就是在微信小程序开发的时候经常用到图片叠加及层叠层的问题,但都比较好解决,就是没有好好研究其概念原理上的东西。因为自己技术及理解有限,也在网上找了很多参考资料,学习到了很多东西,简单分享一下。(一)实现效果说明一下:是通过微信开发者工具展示的小程序效果;(二)实现分析1、效果图展示的是两张图片叠加(一个是上传的图片一个是右上角的删除按钮图标)。实现的方式也是很简单:父级容器...

2018-09-22 20:05:22

微信小程序之swiper组件显示上传多张图片,点击删除图片后其余图片不显示问题(空白),但图片地址可以审查到

这个不知道是不是微信小程序官方的问题,简单描述一下遇到的问题:在使用swiper组件来预览显示用户上传的多张图片后,右上角有一个可以删除图片的按钮,用户可以点击删除符号删除上传的图片。重点是顺时针点击删除图片和删除中间的指定图片,都其余图片显示没问题。唯独删除最后一张图片,问题就来了,排序前面的图片显示不出来(空白);但是可以查到图片组件还有图片地址的???(真机环境也测试过,问题效果是一样的)...

2018-09-20 11:36:26

微信小程序之获取后台动态数据Gird表格布局display:grid

在工作中常用的就是flex布局和grid布局了,因为本人对grid布局不是很熟练,这次主要是想模拟获取后台的动态数据来动态的设置表格布局,算是一个简单的尝试,毕竟之前没有用过。分享一下。如果对cssgrid布局不熟的建议看着篇文章,介绍的很详细:CSSGrid布局完全指南(图解Grid详细教程)(一)实现效果跟我上一篇文章微信小程序之获取后台动态数据表格布局display:t...

2018-09-03 00:03:50

微信小程序之获取后台动态数据表格布局display:table

本文没有采用flex布局和grid布局来设置表格的,而是通过display:table;来设置。一方面工作中经常用到这种自适应表格排版布局方式(包括方框列表及九宫格式),但是flex布局和grid布局来设置的话就很容易了,这次想通过另一种方法来实现,而且这种方法比较少用,所以想尝试一下,分享给大家。如果对这个属性不熟的可以参考这篇文章,介绍的很详细:cssTable布局-display:...

2018-09-02 20:19:34

微信小程序之input组件:真机键盘弹窗遮盖输入框一部分或遮住输入框样式

遇到了一个比较常见,但不注意就会犯错的问题:小程序里面经常会用到组件input,属性也很丰富,如果在页面排版中,将输入固定在底部作为评论之类的,可能就会遇到一个问题,在真机上测试(移动端),点击input组件默认会将键盘弹起时,自动上推页面,就会发现,因为弹窗很容易遮住input组件相关的内容及样式。(一)问题详情1、默认没有点击input输入框(评论框)的时候:2、点击input...

2018-09-01 15:44:18

微信小程序之页面跳转传参数据:json 字符串转对象报错

工作中遇到了这个问题,之前也有遇到过,只是没有去研究这个问题,接下来简单说明一下。(一)问题详情我们在小程序的A页面向B页面跳转的时候,传了页面参数为param(页面参数值只能是字符串,参数值是根据用户点击的信息而不同的),所以传数组或对象需要使用JSON.stringify()转换,到了B页面需要将param获取到并通过JSON.parse()解析,结果问题是有些传过来json正常解析,...

2018-08-31 17:37:28

微信小程序之下拉菜单的三级联动筛选框

下拉菜单很长见,网上也很多例子,自己也根据网上的资料,仿写了一个。感谢作者小小小是我提供了资料,在此做了二次开发,也分享一下,因为自己最近也需要写个小程序的下拉框的三级菜单筛选,分享给有需要的人哈。(一)、实现效果1、原作者资料的实现效果:点击跳转微信小程序仿闲鱼『下拉菜单』2、自己二次开发的实现效果:(二)实现过程实现的代码也并不复杂,主要是控制各个容器的显示和隐藏效...

2018-08-26 13:03:57

微信小程序之简单双向调节的slider滑动选择器

简单说明一下,这是用微信官方的slider组件拼接的,没有用到其他框架哈。(一)实现效果(二)实现过程主要是将两个滑动选择器拼接在一起、各自设置所占长度比,就可以实现双向滚动调节了,但是有一个问题,我没有解决到,就是一个固定的滑动区域内,左右滑块可以相互交接互相滑动,尝试了一下没弄出来。1、wxml代码:<viewclass='sliderHCon'>...

2018-08-22 23:14:17

微信小程序之scroll-view横向滚动不能显示

之前在写scroll-view(可滚动视图区域)遇到一个问题,花一点时间记录分享一下,竖向滚动视图没什么大问题,只需要设置height:rpx;滚动高度区域,然而横向滚动区域就需要注意两个问题了。(一)实现效果(二)注意设置两个属性一开始以为只要照着微信官方的文档介绍就可以想怎么写就怎么写了,结果一直调试不出来,按照官方介绍的属性设置了,子元素容器会各占一行,而且,父元素容器会内...

2018-08-22 14:43:57

微信小程序详解——小程序的生命周期和页面的生命周期

从事小程序开发已经三个星期了,本来自己最近也想写一个小程序生命周期和页面的生命周期文章的,主要是工作上的理解角度来写的,但看到这篇文章写的很详细,很容易理解,推荐分享一下,以下是原文内容:我是一名安卓程序员,我们安卓中最明显的特征就是类具有生命周期。所以当开发小程序的时候,我自然而然的会先研究小程序的生命周期。在Android中是通过Application来管理安卓程序的生命周期,小程序...

2018-08-12 17:22:27

微信小程序去除Button默认样式

在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤。(一)实现效果1、实现前(默认样式):2、实现后(去除默认边框和背景色):(二)实现过程1、使用::after伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以...

2018-08-10 10:38:15

推荐学习的微信小程序开源框架

最近看到的一篇文章,关于小程序开源框架的,涉及的框架自己也有接触、了解过,挺好的一篇文章,所以就拿来分享一下,以下是原文转载:特别说明:这是我目前在接触过和使用过的,自认为是最好用的一个小程序开源框架库。小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的…特别说明:这是我目前在接触过和使用...

2018-08-06 09:45:44

微信小程序图片遮罩层demo

在工作中经常会用到遮罩层弹窗,所以简单分享一下,之前写过的一个弹出广告图片遮罩层功能demo。(一)实现效果(二)实现过程实现过程主要是设置css样式,比较容易理解。1、设置wxml代码布局:设置一个背景布局:用来显示灰色背景;嵌套一个显示展示图片容器,嵌套一个显示闭关按钮的容器。<viewclass="b1"hidden="{{flag}}">...

2018-07-29 17:13:13

微信小程序登录欢迎页面demo

之前有用过小程序的欢迎页面,也是GitHub上找到的一个案例。近期有用到,简单的分享一下,可以让有需要的人避免重复造轮子和更好的创新学习。(一)效果预览直接看效果如何,是否符合您的要求,不符合直接结束浏览,避免浪费您的时间。(二)代码目录简单实用,直接下载工具打开预览,代码下载(三)参考文献微信小程序商城,微信小程序微店...

2018-07-29 12:24:34

css中的position定位

在复习position定位属性,看到一篇介绍很棒的文章,所以转载记录一下。原文章地址点击跳转。今天给大家分享一下,深度思考中的知识点——position定位有哪几种?各有什么特点?一、背景介绍position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。二、知识剖析position概念:CSS的很多其他...

2018-07-15 22:05:19

div+css设置水平垂直居中方法

之前写前端页面经常会遇到这个问题,所以抽了个时间总结了一下这些常用的方法,通常分为两种情况来设置:已知宽高和未知。简单的分享一下经验。(一)已知宽高情况的设置position:absolute;,margin:auto;使用position的绝对定位和margin的居中定位,四个方向位置距离设置成一样就行了(通过填充父元素的可用空间,子元素设定了宽高,那么多余的空间,被margin:...

2018-07-15 16:34:45

Vue 进阶教程之:详解 v-model

本文声明:这是转载简书上的一篇文章,原作者Yi罐可乐,写的这篇文章非常详细却容易理解,对v-model的理解有了更深入的认识,感谢。以下是原文,也可以点击跳转到原文章查看Vue官网教程上关于v-model的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下,并介绍Vue2.2v-model改进的地方,然后穿插的再说点Vue的小知识。在Vue中,有许多方法和An...

2018-07-15 14:42:19

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!