微信小程序 - IOS 仿餓了(le／liǎo)麽"我的(de)",下拉橡皮筋效果

發表時(shí)間：2021-3-31

發布人(rén)：融晨科技

浏覽次數：92

這(zhè)個(gè)需求是(shì)在(zài)wepy交流群裏有群友提到(dào)的(de). 一個(gè)小花樣.

注冊mixins

/**
 * IOS專用 頂部下拉橡皮筋效果
 * 安卓的(de)Page在(zài)到(dào)達頂部的(de)時(shí)候,不(bù)能繼續下拉...略過
 * 
 *  效果見  餓了(le／liǎo)麽送餐服務 "我的(de)" 頁面 IOS環境  上(shàng)下拖動
 * 
 * 下拉時(shí), 頂部色塊拉伸,上(shàng)劃時(shí),頂部色塊收縮.
 * wxml  :  
 <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>
 * 
 */ 
var obj = {
  onLoad(){
    /**獲取當前是(shì)何種平台 */
    var SystemInfo = getApp().globalData.SystemInfo||{};
    this.__IS_IOS = SystemInfo.system && SystemInfo.system.toLowerCase().indexOf("ios")>=0;
  },
  onPageScroll(e) {
   //非ios 略過效果
    if (!this.__IS_IOS)return;
    // console.log(e)
    var top = e.scrollTop;
    if (top > 0) {  //上(shàng)劃時(shí), 整個(gè)view上(shàng)移 , 避免因爲(wéi / wèi)持續上(shàng)劃,看到(dào) 後面的(de)view
      this.setData({
        elastic_top: -top
      });
      return;
    }
    this.setData({  //動态設置 高度
      elastic_topHeight: Math.abs(top * 2)+50
    });
  }
};
module.exports= obj;

wxml很簡單.在(zài)你的(de)最外層增加

 <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中顔色自定義,其他(tā)根據需要(yào / yāo)來(lái)