- 博客(6)
- 收藏
- 关注
原创 小程序瀑布流布局(通用方法)
小程序完美实现类花瓣网小红书瀑布流布局问题做毕业设计需要用到瀑布流布局,看了网上的方法主要有以下两种,但基本都存在问题。1、使用纯css样式排列出瀑布流布局核心代码:父元素:column-count: 2子元素:break-inside: avoid局限:只能一次性展示全部数据,不能做动态数据加载,数据显示位置会随数据加载而错位。2、分成左右两列 根据单条数据索引的奇偶排列出瀑布流布局核心代码:wx-if="{{index%2==0}}"局限:当奇数列的元素高度大于或小于偶数列
2021-03-18 00:00:14
1007
1
原创 去除隐藏小程序右侧滚动条的两种方法
这是一篇追求完美的杠精文章在测试小程序布局时会出现,滚动条穿透的现象,如图????某团的滚动条已穿透顶部自定义导航栏自定义导航栏一定要用 cover-view、 一定要用 cover-view 、一定要用 cover-view或是 在一些不需要滚动条 提示页面长度的情况下显示滚动条 这就很难受所以总结了两个目前确定能用的方法:1、使用cover-view标签覆盖滚动条2、使用scroll-view标签绕过滚动条但各个方法都有各自的局限性下面进入正题1、用图层覆
2020-10-21 01:37:07
2054
原创 微信小程序自定义导航栏 胶囊菜单按钮高度完美适配 原理简单 赛过一些大厂的适配 妈妈再也不用担心我强迫症啦
在自定义小程序导航栏时,右上角的胶囊(MenuButton)在不同机型测试,会发现很难适配。不同的手机,胶囊高度也不一样,完全需要动态的计算高度。先看一些小程序顶部导航栏适配的情况图一 某团 图二 某乎 图三 某东 图四 某拉上图适配做的最好的是某东,但仔细看仍会有一点错位,但输入框的颜色,淡化了这种不和谐感。为解决这个问题就要搞清楚原理这是在没有设置自定义时的原生导航栏,我们发现整体的高度就是 (状态栏高度 + 导航栏高度)而状态栏高度可...
2020-10-18 18:34:16
12105
15
原创 小程序封装自定义图标组件
自定义一个icon图标组件 好用 好管理组件 wxml 呆????<!--组件/icon/icon.wxml--><view style='height:{{size}}px;width:{{size}}px'> <block wx:for='{{icon}}' wx:key='index' wx:if='{{type==item.type}}'> <image src='{{item.img}}' /> </block>
2020-10-17 15:48:03
357
1
原创 小程序js 获取时间 时间一位数变两位数
获取的时和分 是数字, 未超过10时显示一位数,很难看,先通过.toString()方法转成字符串类型再通过三元运算判断长度是否小于2,决定是否拼接 '0'呆????:/* 获取日期时间 年 月 日 时 分 */function getDate() { let nd, yea, mon, day, date, hou, min nd = new Date() //日期对象 yea = nd.getFullYear() //年 9999 mon = nd.getMonth()
2020-10-17 13:39:44
1474
原创 微信小程序swiper组件实现抖音翻页切换视频功能
效果图:video官方介绍:https://developers.weixin.qq.com/miniprogram/dev/component/video.htmlswiper官方介绍:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html上代码就完了,奥利给 ! ! ! (里面包含了自定义导航栏的东西 不过不多 参考着康康 吼吼吼...)wxml:<!-- 自定义头部导航...
2020-06-22 15:32:35
3879
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人