小程序模板网

微信小程序 - IOS 仿饿了么"我的",下拉橡皮筋效果

这个需求是在wepy交流群里有群友提到的. 一个小花样.

注册mixins

 

				
  1. /**
  2. * IOS专用 顶部下拉橡皮筋效果
  3. * 安卓的Page在到达顶部的时候,不能继续下拉...略过
  4. *
  5. * 效果见 饿了么送餐服务 "我的" 页面 IOS环境 上下拖动
  6. *
  7. * 下拉时, 顶部色块拉伸,上划时,顶部色块收缩.
  8. * wxml :
  9.  
  10. <view style='background-color: #0000ff;min-height:50vh;z-index:-1;height:{{elastic_topHeight||50}}px;width:100%;position:fixed;top:{{elastic_top}}px;'></view>
  11. *
  12. */
  13. var obj = {
  14.  
  15. onLoad(){
  16. /**获取当前是何种平台 */
  17. var SystemInfo = getApp().globalData.SystemInfo||{};
  18. this.__IS_IOS = SystemInfo.system && SystemInfo.system.toLowerCase().indexOf("ios")>=0;
  19. },
  20.  
  21. onPageScroll(e) {
  22. //非ios 略过效果
  23. if (!this.__IS_IOS)return;
  24. // console.log(e)
  25. var top = e.scrollTop;
  26. if (top > 0) { //上划时, 整个view上移 , 避免因为持续上划,看到 后面的view
  27. this.setData({
  28. elastic_top: -top
  29. });
  30. return;
  31. }
  32. this.setData({ //动态设置 高度
  33. elastic_topHeight: Math.abs(top * 2)+50
  34. });
  35. }
  36.  
  37.  
  38. };
  39. module.exports= obj;

wxml很简单.在你的最外层增加

 

				
  1. <view style='background-color: #0000ff;min-height:50vh;z-index:-1;height:{{elastic_topHeight||50}}px;width:100%;position:fixed;top:{{elastic_top}}px;'></view>

style中颜色自定义,其他根据需要来

注意,他上拉的时候,背景色还是白色,和顶部颜色并不一样.

这种方式实现,要求你的 顶级view要有一个背景色,否则这个橡皮筋效果就会暴露出来



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24068.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询