微信小程序
haoyanyu_
这个作者很懒,什么都没留下…
展开
-
微信小程序:随页面滚动渐变的顶部导航组件
需求:进入页面时,没有导航栏,随着页面向上滚动,滚动条透明度逐渐变清晰,最后全部展示出来。随着页面向下滚动,导航栏再逐渐消失思路:一个fixed定位的导航栏组件,外部传入opacity来控制css属性来控制透明度。页面使用时,在onPageScroll里用throttle防抖方法在滚动时改变opacity核心代码:// gradient-bar.jsconst { SDKVersion, version, statusBarHeight } = wx.getSystemInfoSync();原创 2020-08-15 21:56:21 · 2649 阅读 · 0 评论 -
微信小程序之将页面滚动到顶部或者目标位置wx.pageScrollTo
将页面滚动到指定位置有两种情况:页面滚动到顶部;滚动到某个元素的位置;wx.pageScrollTo()可以实现以上两种需求,具体用法如下综上:对于情况一,页面滚动回顶部,直接设置scrollTop: 0:wx.pageScrollTo({ scrollTop: 0});注意:重点!重点!重点!以上代码要生效的前提是,当前页面高度超过一屏对于情况二,滚动到目标位置,需要用selectorwx.pageScrollTo({ selector: '#hot-title'原创 2020-08-11 20:28:10 · 15110 阅读 · 2 评论 -
微信小程序之1rpx的边框在部分机型上展示不全的问题
最近写小程序的商品列表时,商品卡片里需要展示商品的【优惠券】或者【包邮】标签。设计稿里,标签的边框是0.5px, 在微信小程序里就是1rpx的宽度。测试的时候发现在一部iphone6手机上,【包邮】的右边框展示不完整,如下图:测试数据没有商品图片,忽略忽略,看【包邮】标签就好 ????包邮标签的样式写在css里,border: 1rpx solid #FF4444;border-width改成2rpx(即1px)是可以正常展示的,只不过边框变宽了,但是要按照稿子来啊*(审美缺失部的名头可是原创 2020-08-10 15:24:29 · 1449 阅读 · 0 评论 -
小程序瀑布流布局的实现方案
文章目录瀑布流布局1. 高度固定的横向瀑布流2. 宽度固定的纵向瀑布流2.1 一次性渲染所有元素2.2 当需要动态加载新数据时情况一:每次获取到的数据数量相同情况二:每次获取到的数据数量不确定情况三: 元素之间高度差变大,每次的数量也可能不一样Masonry插件小程序的实现细节2.3 项目中遇到的情况????????????????总结????????????瀑布流是现在很流行很常见的一种布局,表现为参差不齐的多栏布局,产品很喜欢用。刚开始写小程序就遇到了瀑布流的需求,也是有点刺激~~瀑布流布局瀑布原创 2020-08-06 23:29:33 · 2617 阅读 · 1 评论 -
微信小程序 scroll-view 实现横向、纵向滚动
1.纵向滚动api文档有注明,<scroll-view scroll-y style="height: 400rpx;"> 1231231231</scroll-view>即 如果是纵向滚动,必须指定滚动区域的高度2.横向滚动核心思想: 需要让scroll-view里的子元素在一行展示。 1> 父元素设置 white-space: nowr...原创 2018-09-04 16:46:12 · 33602 阅读 · 9 评论