|
這個(gè)需求是在wepy交流群里有群友提到的. 一個(gè)小花樣.
注冊mixins
-
/**
-
* IOS專用 頂部下拉橡皮筋效果
-
* 安卓的Page在到達(dá)頂部的時(shí)候,不能繼續(xù)下拉...略過
-
*
-
* 效果見 餓了么送餐服務(wù) "我的" 頁面 IOS環(huán)境 上下拖動(dòng)
-
*
-
* 下拉時(shí), 頂部色塊拉伸,上劃時(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(){
-
/**獲取當(dāng)前是何種平臺(tái) */
-
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í), 整個(gè)view上移 , 避免因?yàn)槌掷m(xù)上劃,看到 后面的view
-
this.setData({
-
elastic_top: -top
-
});
-
return;
-
}
-
this.setData({ //動(dòng)態(tài)設(shè)置 高度
-
elastic_topHeight: Math.abs(top * 2)+50
-
});
-
}
-
-
-
};
-
module.exports= obj;
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>
style中顏色自定義,其他根據(jù)需要來
注意,他上拉的時(shí)候,背景色還是白色,和頂部顏色并不一樣.
這種方式實(shí)現(xiàn),要求你的 頂級(jí)view要有一個(gè)背景色,否則這個(gè)橡皮筋效果就會(huì)暴露出來
|
