微信小程序搬砖记(一)
微信小程序遇到的坑——两种效果实现
据说没有一个小姐姐来镇这篇博客,我的浏览量是上不去的 😂。
微信小程序首页吸顶的效果实现
在实现的过程中,需要把该准备的东西先准备一波,不然老司机开车也开不动呀!🚌
首先需要 wxml 的支持:
1 | <view |
再者需要 wxss 的支持:
1 | .recomend-fixed { |
准备好了,开始通过js
来实现最核心的部分。开车了 🚍,小伙伴们,开始上车了。
方法 1 通过 scroll-view 来实现吸顶的效果
使用scroll-view
组件,上面的 wxml 的内容需要包裹在<scroll-view scroll-y style="height: 100%" bindscroll="scroll"></scroll-view>
里面。
1 | Page({ |
方法 2 通过 onPageScroll 来实现吸顶的效果
如果不使用scroll-view
,利用页面的onPageScroll
方法,但是你在使用的过程中会有一些问题:
1.在 page 标签的样式会携带一个样式overflow-y:hidden
,导致你页面滚动不了,不能触发onPageScroll
方法 2.在 page 标签和包含上面的 wxml 的父标签里面不能同时使用height:100%
.
JS
实现部分:
1 | Page({ |
方法 3 通过 position:sticky 来实现吸顶的效果(后续补充)
在 CSS3 中有一个属性可以简单的实现吸顶的效果,实现的代码:
1 | .sticky { |
**注意:**该方法在微信小程序的应用效果不是很好,开始吸顶后滚动着就不见了
微信小微信头部滑动切换效果实现
方法 1 通过设置固定的滑动距离来实现点击滑动
头部 tab 页有很多标签通过点击其中一个进行滑动对应的标签。
所需的wxml
的内容:
1 | <scroll-view |
所需的wxss
的内容:
1 | .active { |
最重要的JS
部分:
1 | Page({ |
方法 2 通过获取点击元素距离左边的距离跟屏幕宽度的一半来实现点击居中(后续补充)
实现的思想:
- 获取屏幕宽度的一半
- 获取点击元素距离屏幕左边的距离
- 获取点击元素的宽度一半
- 获取已经滚动的距离
- 计算距离的变化:点击元素与屏幕左边的距离-屏幕的一半+点击元素宽度的一半
- 计算最终需要滚动的距离:原先滚动距离+变化距离
所需的wxml
的内容:
1 | <scroll-view |
所需的wxss
的内容:
1 | .single-line .list { |
最重要的JS
部分:
1 | /** |
总结
通过上述方法实现的吸顶和 tab 列表横向滑动效果,吸顶效果在 ios 上时比较流畅,android 上滑动慢一点还算流畅,但是快一点就卡顿;tab 列表横向滑动效果补充了一种点击自动居中的方法,如果大家有更好的方法推荐,请望各位赐教。
参考链接
本文由 Abert 创作,采用 知识共享署名 4.0 国际许可协议。
本站文章除注明转载/出处外,均为本站原创或翻译,转载请务必署名。