首先给首页添加轮播图，在轮播图的返回函数里打开一个新的frame，新的frame里面写上搜索框的样式及功能。新的frame背景色设为透明色
bgColor: 'rgba(0,0,0,0.0)',；
首页和搜索页是两个页面 在首页不好操作搜索页的背景色，但是
setFrameAttr可以轻松搞定。
1 var UIScrollPicture = api.require('UIScrollPicture'); 2 UIScrollPicture.open({ 3 rect: { 4 x: 0, 5 y: 0, 6 w: api.winWidth, 7 h: api.winHeight / 2 8 }, 9 data: { 10 paths: [ 11 'widget://image/share/qq.png', 12 'widget://image/share/qq.png', 13 'widget://image/share/qq.png' 14 ], 15 captions: ['apicloud', 'apicloud', 'apicloud', 'apicloud'] 16 }, 17 styles: { 18 caption: { 19 height: 35, 20 color: '#E0FFFF', 21 size: 13, 22 bgColor: '#696969', 23 position: 'bottom' 24 }, 25 indicator: { 26 dot:{ 27 w:20, 28 h:10, 29 r:5, 30 margin:20 31 }, 32 align: 'center', 33 color: '#FFFFFF', 34 activeColor: '#DA70D6' 35 } 36 }, 37 placeholderImg: 'widget://res/slide1.jpg', 38 contentMode: 'scaleToFill', 39 interval: 3, 40 fixedOn: api.frameName, 41 loop: true, 42 fixed: false 43 }, function(ret, err) { 44 if (ret) { 45 alert(JSON.stringify(ret));
1 打开新的frame
api.openFrame({ 2 name: 'index_search', 3 url: './index_search.html', 4 rect: { 5 x: 0, 6 y: 0, 7 w: 'auto', 8 h:65 9 }, 10 pageParam: { 11 12 }, 13 bounces: true, 14 bgColor: 'rgba(0,0,0,0.0)', 15 vScrollBarEnabled: true, 16 hScrollBarEnabled: true 17 });
46 } else { 47 alert(JSON.stringify(err)); 48 } 49 });
获取当前页面滑动的高度。当高度>90时给搜索框加上背景色，当<90时 背景色为透明色
1 首页的js，写在apiready 里
function sousuo(){ 2 $(document).scroll(function() { //页面加载时，获取滚动条初始高度 3 4 distance = $(document).scrollTop(); //获取滚动条初始高度的值 ：0 5 6 // console.log(distance); //打印滚动条不同高度的位置的值 7 8 if (distance <= 90) { //当滚动条高度为0时 9 // $('#index_sousuo').hide(); // removeActive('.Creative') //移除某某css
//在首页操作搜索页的背景色
10 api.setFrameAttr({ 11 name: 'index_search', 12 bgColor:'rgba(243,84,78,0)' 13 }); 14 15 } else { 16 api.setFrameAttr({ 17 name: 'index_search', 18 bgColor:'rgba(243,84,78,1)' 19 }); 20 } 21 }) 22 }
打开新的frame页面（搜索框页面） 此时注意搜索框页面里背景色一开始设置为透明色
background-color:rgba(0,0,0,0);
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> 7 <title>APICloud APP</title> 8 <link rel="stylesheet" type="text/css" href="../css/api.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 10 <style> 11 html, 12 body { 13 height: 100%; 14 width: 100%; 15 background-color:rgba(0,0,0,0); 16 } 17 .home-citylist { 18 float: left; 19 height:65px; 20 line-height: 80px; 21 color: #fff; 22 font-size: 14px; 23 margin-left: 15px; 24 } 25 26 .home-citylist>img { 27 height: 15px; 28 vertical-align: top; 29 padding-top: 30px; 30 } 31 .home-search { 32 position: absolute; 33 bottom: 8px; 34 left: 90px; 35 right: 60px; 36 height: 30px; 37 line-height: 30px; 38 background-color: #ececec; 39 border-radius:10px; 40 color:#555; 41 font-size: 14px; 42 } 43 44 .home-search>img { 45 height: 20px; 46 padding-top: 7px; 47 padding-left: 10px; 48 padding-right: 10px; 49 vertical-align: top; 50 } 51 52 </style> 53 </head> 54 55 <body> 56 <div style="position:fixed;width:100%;background-color:rgba(243,84,78,0)" id="index_sousuo"> 57 <div class="home-citylist open-win" onclick="tocitylist()" > 58 <span class="currentCity" id="currentCity">苏州</span> 59 <img src="../image/header/dingwei.png"> 60 </div> 61 <div class="home-search open-win"onclick="tosearch()"> 62 <img src="../image/header/sear.png"> 63 <span>输入车辆品牌或车型</span> 64 </div> 65 </div> 66 67 </body> 68 69 70 112 113 114 </html>