# 沉浸式加下拉漸變效果
如圖所示,我們要實現下拉后頂部沉浸式效果+頭部漸變效果,怎么做?

# 思路:
一:frame組區域為設置
二:每一個頁面加一個狀況`header`
三:JS增加window監聽下劃效果
四:CSS增加漸變效果
# 代碼
## 一:frame組區域設置
>原理:
1、總的初始把頭部隱藏,frame把高度去掉
2、重置第一個區域
3、點擊第二個區域顯示頭部,重置高度
4、第三個高度和第二個區域的高度是一樣的
```
//打開frame組
api.openFrameGroup({
name: 'meunFrame',
scrollEnabled: false,
vScrollBarEnabled : false,
hScrollBarEnabled : false,
rect: {
x: 0,
y: 0,
w: 'auto',
h: api.winHeight - $api.byId('footer').offsetHeight
},
index: 0,
frames: [{
name: 'index',
url: './index/index.html'
// ,bounces: true
}, {
name: 'trip',
url: './trip/index.html',
//bounces: true
}, {
name: 'my',
url: './my/index.html',
}]
}, function (ret, err) {
if (ret) {
var index = ret.index; //索引值
switch (index) {
case 0:
$api.text($api.byId('header'), '首頁');
api.setFrameGroupAttr({
name: 'meunFrame',
rect: {
x: 0,
y: 0,
w: 'auto',
h: api.winHeight - $api.byId('footer').offsetHeight
}
});
break;
case 1:
$api.text($api.byId('header'), '行程');
$("#header").removeClass("aui-hide");
var headerPos = $api.offset(header);
api.setFrameGroupAttr({
name: 'meunFrame',
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: api.winHeight - $api.byId('footer').offsetHeight - $api.byId('header').offsetHeight
}
});
break;
case 2:
$api.html($api.byId('header'), ' <div class="aui-title">我的</div><div class="aui-pull-right aui-btn"><span class="icon iconfont icon-kefu" onclick="Service_tel()"></span></div>');
$("#header").removeClass("aui-hide");
var headerPos = $api.offset(header);
api.setFrameGroupAttr({
name: 'meunFrame',
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: api.winHeight - $api.byId('footer').offsetHeight - $api.byId('header').offsetHeight
}
});
break;
}
} else {
alert(JSON.stringify(err));
}
});
```
## 二:在首頁加一個`header`
```
<header class="aui-bar aui-bar-nav">
888
</header>
```
## 三:JS增加window監聽下劃效果
> 注:需要 `statusBar` 模塊兒
```
apiready = function() {
//沉浸式狀態欄
var systemType = api.systemType;
var statusBar = api.require('statusBar');
if (systemType == "ios") {
if (navigator.userAgent.indexOf("iPhone") != -1) {
statusHeight = 20;
$("header").css({
"paddingTop": "20px"
});
} else if (navigator.userAgent.indexOf("iPad") != -1) {
//不處理沉浸式
}
} else {
statusBar.getStatusBarHeight(function(ret, err) {
$("header").css({
"paddingTop": ret.statusHeight
});
});
}
}
//滾動頭部樣式
window.addEventListener("scroll", function(e) {
var t = document.documentElement.scrollTop || document.body.scrollTop;
if (t > 100) {
$(".aui-bar-nav").removeClass("test1");
$(".aui-bar-nav").addClass("test");
} else {
$(".aui-bar-nav").removeClass("test");
$(".aui-bar-nav").addClass("test1");
}
});
```
## 四:CSS增加漸變效果
```
//不透明
.test {
background: rgba(44, 215, 222, 1) !important;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
//透明
.test1 {
background: rgba(44, 215, 222, 0) !important;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
//固定
.aui-bar-nav {
position: fixed !important;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 9999;
}
```
- 模塊兒
- 極光推送
- 推送模塊(客戶端)
- 推送模塊(服務器端)
- 蘋果推送p12證書
- 檢測推送是否開啟
- 支付模塊
- 微信支付--wxPay(客戶端)
- 微信支付--wxPay(服務端)
- 支付寶支付--aliPay(客戶端)
- 支付寶支付--aliPay(服務端)
- DoT模板
- 緩存模塊兒
- 監聽模塊兒
- 設置狀態欄字體顏色
- 選擇城市插件
- 語音識別模塊兒
- 分享
- 百度定位bMap
- 第三方登錄
- QQ網站和appQQ賬號統一
- 微信登錄
- QQ登錄
- 微博登錄
- 上傳圖片模塊
- GIT使用
- GITHUB使用
- 碼云使用-公開
- 碼云使用-私密
- 文檔
- 關于ios數字自動識別成手機號
- 點擊彈出放大圖片層
- 跨win或frm執行腳本
- 上拉加載下拉刷新模塊
- 安卓包名和簽名怎么獲取
- 文件和圖片緩存機制分享
- 注冊登錄忘記密碼
- tabBarMenu底部導航
- 跨頁面執行方法
- 安卓點擊返回事件
- 圖片緩存
- 魅族手機apiready問題
- 沉浸式加下拉漸變效果
- 調試
- apicloud在chrome下進行手機上調試
- 手機點擊PHPSTORM調試
- 報錯處理
- 調試方法
- 更新
- 云修復(不建議使用)
- 版本更新
- 上傳報錯匯總
- IDE
- webstorm
- atom
- atom插件使用
- 插件列表
- 塊兒狀注釋
- 列選擇sublime-style-column-selection
- 標題注釋docblockr
- JS壓縮神器atom-minify
- 常用快捷鍵匯總
- 手機兼容性
- iPhone X 適配
- 加密
- 國際化
- 上傳
- 簽名
- 報錯
- 數據類型錯誤