
微信小程序
文章平均质量分 70
纵倾童鞋
“永远渴望,大智若愚”(Stay Hungry, Stay Foolish)
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
提取wux-weapp的微信小程序筛选框:FilterBar
本来是一个GitHub上wux-weapp组件的筛选框,但是整个项目过于系统化,想提取某个组件都是有点难度的,首先要看得懂某个组件的整个生命逻辑,所以自己也是摸索过来的,便简单的提取了wux-weapp组件的FilterBar筛选框的部分功能,满足个人需求及分享一下。(一)原组件信息原组件是GitHub上的wux - 微信小程序自定义组件可以实现对话框、指示器、五星评分等22种功能。点...原创 2018-07-12 19:32:12 · 5596 阅读 · 0 评论 -
微信小程序之animation底部弹窗动画(两种方法)
简单分享一下常用语购物车和下拉框(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果。(一)实现效果简单说明一下,只有点击按钮才能出发弹窗(指定位置),弹窗弹出后,只有点击背景灰色区域弹窗才能收回,点击弹窗内容区域(粉红色部分是不能收回弹窗的),自己可以自定义粉红色部分右上角关闭按钮。(二)实现分析需要一个容器为背景色(灰色区域),一个容器为弹窗内容(粉红色区域...原创 2018-10-30 10:54:59 · 2971 阅读 · 1 评论 -
微信小程序之物流状态时间轴
一个月左右没更新博客了,最近有点懒了哈(工作上真的忙),很多工作上学习到的东西都没有及时分享出来,有点愧疚,不过自己最近一直在收集资料和学习一些新技术,最主要是想要构建自己的前端技术体系和自定义一个前端规范文档,哈哈哈。说重点啦,微信小程序里面开发的商城模板还挺多的,刚好写了一个物流状态的时间轴,简单分享一下哈。(一)实现效果真机测试的结果(图片忘记缩小了)(二)实现分析页面布局拆分:...原创 2018-10-25 16:08:43 · 9069 阅读 · 12 评论 -
CSS之实现图片叠加的层叠层问题
在工作中,也就是在微信小程序开发的时候经常用到图片叠加及层叠层的问题,但都比较好解决,就是没有好好研究其概念原理上的东西。因为自己技术及理解有限,也在网上找了很多参考资料,学习到了很多东西,简单分享一下。(一)实现效果说明一下:是通过微信开发者工具展示的小程序效果;(二)实现分析1、效果图展示的是两张图片叠加(一个是上传的图片一个是右上角的删除按钮图标)。实现的方式也是很简单:父级容器...原创 2018-09-22 20:05:22 · 24065 阅读 · 2 评论 -
微信小程序之swiper组件显示上传多张图片,点击删除图片后其余图片不显示问题(空白),但图片地址可以审查到
这个不知道是不是微信小程序官方的问题,简单描述一下遇到的问题:在使用swiper组件来预览显示用户上传的多张图片后,右上角有一个可以删除图片的按钮,用户可以点击删除符号删除上传的图片。重点是顺时针点击删除图片和删除中间的指定图片,都其余图片显示没问题。唯独删除最后一张图片,问题就来了,排序前面的图片显示不出来(空白);但是可以查到图片组件还有图片地址的???(真机环境也测试过,问题效果是一样的)...原创 2018-09-20 11:36:26 · 1791 阅读 · 0 评论 -
微信小程序之获取后台动态数据Grid表格布局display:grid
在工作中常用的就是flex布局和grid布局了,因为本人对grid布局不是很熟练,这次主要是想模拟获取后台的动态数据来动态的设置表格布局,算是一个简单的尝试,毕竟之前没有用过。分享一下。如果对css grid布局不熟的建议看着篇文章,介绍的很详细:CSS Grid 布局完全指南(图解 Grid 详细教程)(一)实现效果跟我上一篇文章微信小程序之获取后台动态数据表格布局display:t...原创 2018-09-03 00:03:50 · 8076 阅读 · 1 评论 -
微信小程序之获取后台动态数据表格布局display:table
本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置。一方面工作中经常用到这种自适应表格排版布局方式(包括方框列表及九宫格式),但是flex布局和grid布局来设置的话就很容易了,这次想通过另一种方法来实现,而且这种方法比较少用,所以想尝试一下,分享给大家。如果对这个属性不熟的可以参考这篇文章,介绍的很详细:css Table布局-display:...原创 2018-09-02 20:19:34 · 18487 阅读 · 5 评论 -
微信小程序之input组件:真机键盘弹窗遮盖输入框一部分或遮住输入框样式
遇到了一个比较常见,但不注意就会犯错的问题:小程序里面经常会用到组件input,属性也很丰富,如果在页面排版中,将输入固定在底部作为评论之类的,可能就会遇到一个问题,在真机上测试(移动端),点击input组件默认会将键盘弹起时,自动上推页面,就会发现,因为弹窗很容易遮住input组件相关的内容及样式。(一)问题详情1、默认没有点击input输入框(评论框)的时候: 2、点击input...原创 2018-09-01 15:44:18 · 10615 阅读 · 11 评论 -
微信小程序之页面跳转传参数据:json 字符串转对象报错
工作中遇到了这个问题,之前也有遇到过,只是没有去研究这个问题,接下来简单说明一下。(一)问题详情我们在小程序的A页面向B页面跳转的时候,传了页面参数为param(页面参数值只能是字符串,参数值是根据用户点击的信息而不同的),所以传数组或对象需要使用JSON.stringify()转换,到了B页面需要将param获取到并通过JSON.parse()解析,结果问题是有些传过来json正常解析,...原创 2018-08-31 17:37:28 · 3644 阅读 · 0 评论 -
微信小程序之简单双向调节的slider滑动选择器
简单说明一下,这是用微信官方的slider组件拼接的,没有用到其他框架哈。(一)实现效果(二)实现过程主要是将两个滑动选择器拼接在一起、各自设置所占长度比,就可以实现双向滚动调节了,但是有一个问题,我没有解决到,就是一个固定的滑动区域内,左右滑块可以相互交接互相滑动,尝试了一下没弄出来。 1、wxml代码:<view class='sliderHCon'> ...原创 2018-08-22 23:14:17 · 8684 阅读 · 3 评论 -
微信小程序之scroll-view横向滚动不能显示
之前在写scroll-view(可滚动视图区域)遇到一个问题,花一点时间记录分享一下,竖向滚动视图没什么大问题,只需要设置height:rpx; 滚动高度区域,然而横向滚动区域就需要注意两个问题了。(一)实现效果(二)注意设置两个属性一开始以为只要照着微信官方的文档介绍就可以想怎么写就怎么写了,结果一直调试不出来,按照官方介绍的属性设置了,子元素容器会各占一行,而且,父元素容器会内...原创 2018-08-22 14:43:57 · 7474 阅读 · 8 评论 -
微信小程序之下拉菜单的三级联动筛选框
下拉菜单很长见,网上也很多例子,自己也根据网上的资料,仿写了一个。感谢作者小小小是我提供了资料,在此做了二次开发,也分享一下,因为自己最近也需要写个小程序的下拉框的三级菜单筛选,分享给有需要的人哈。(一)、实现效果1、原作者资料的实现效果:点击跳转微信小程序仿闲鱼『下拉菜单』 2、自己二次开发的实现效果: (二)实现过程实现的代码也并不复杂,主要是控制各个容器的显示和隐藏效...原创 2018-08-26 13:03:57 · 17351 阅读 · 13 评论 -
微信小程序详解——小程序的生命周期和页面的生命周期
从事小程序开发已经三个星期了,本来自己最近也想写一个小程序生命周期和页面的生命周期文章的,主要是工作上的理解角度来写的,但看到这篇文章写的很详细,很容易理解,推荐分享一下,以下是原文内容: 我是一名安卓程序员,我们安卓中最明显的特征就是类具有生命周期。所以当开发小程序的时候,我自然而然的会先研究小程序的生命周期。在Android中是通过Application来管理安卓程序的生命周期,小程序...转载 2018-08-12 17:22:27 · 4309 阅读 · 0 评论 -
推荐学习的微信小程序开源框架
最近看到的一篇文章,关于小程序开源框架的,涉及的框架自己也有接触、了解过,挺好的一篇文章,所以就拿来分享一下,以下是原文转载: 特别说明:这是我目前在接触过和使用过的,自认为是最好用的一个小程序开源框架库。小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的 … 特别说明:这是我目前在接触过和使用...转载 2018-08-06 09:45:44 · 1810 阅读 · 0 评论 -
微信小程序去除Button默认样式
在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤。(一)实现效果1、实现前(默认样式): 2、实现后(去除默认边框和背景色): (二)实现过程1、使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以...原创 2018-08-10 10:38:15 · 62249 阅读 · 11 评论 -
微信小程序图片遮罩层demo
在工作中经常会用到遮罩层弹窗,所以简单分享一下,之前写过的一个弹出广告图片遮罩层功能demo。(一)实现效果(二)实现过程实现过程主要是设置css样式,比较容易理解。 1、设置wxml代码布局:设置一个背景布局:用来显示灰色背景;嵌套一个显示展示图片容器,嵌套一个显示闭关按钮的容器。 <view class="b1" hidden="{{flag}}">...原创 2018-07-29 17:13:13 · 8526 阅读 · 1 评论 -
微信小程序登录欢迎页面demo
之前有用过小程序的欢迎页面,也是GitHub上找到的一个案例。近期有用到,简单的分享一下,可以让有需要的人避免重复造轮子和更好的创新学习。(一)效果预览直接看效果如何,是否符合您的要求,不符合直接结束浏览,避免浪费您的时间。 (二)代码目录简单实用,直接下载工具打开预览,代码下载 (三)参考文献微信小程序商城,微信小程序微店...原创 2018-07-29 12:24:34 · 18563 阅读 · 10 评论 -
微信小程序之自定义对话框组件弹窗动画
学习微信小程序组件之后,一直都是使用别人的组件开发的,刚看到一篇文章讲解微信小程序自定义组件通俗易懂的开发案例觉得一看就会自己写组件了,真的很棒,感谢原作者的手把手教你实现微信小程序中的自定义组件,自己也添加了一些修改(修改部分样式,添加是否显示“取消”按钮功能,添加弹窗淡入淡出动画,初始化组件赋值操作等一些简单的东西和注释化流程提示)。主要是敲一遍代码学习之后才体会到原理是这样子的嘛,光看文档...原创 2019-01-24 12:28:29 · 2566 阅读 · 0 评论