Angular+ionic实现页面滑动搜索框背景色渐变
实现功能：页面滚动，搜索框背景由透明变白色
ts中添加监听事件
// 监听滚动条resizeHeader(event){console.log(event)var _header = document.getElementById("detailNavBar");let _opacity = event.detail.scrollTop / 235;if(_opacity > 1) {_opacity = 1_header.setAttribute('style','background: rgba(255,255,255,' + _opacity + ')');} else {_header.setAttribute('style','background: rgba(255,255,255,' + _opacity + ')');}console.log(_opacity)// _header.setAttribute('style','opacity:' + _opacity);console.log("aaa");}//加入方法ionViewWillEnter() {this.getData();this.slides.startAutoplay();this.resizeHeader(event);}
html中：
//搜索框添加id="detailNavBar" <section class="shop-item-header"><div id="detailNavBar" (click)="changebgcolor()"><div class="shop-content-left"><img class="shop-cleft-img" src="../../../assets/icon/search-icon/left.png"><div class="shop-cleft-text">商品交易</div></div><div class="shop-item-search"><img class="shop-search-find" src="../../../assets/icon/search-icon/search.png"><input class="shop-search" type="text" placeholder="搜索商品"><img class="shop-search-voice" src="../../../assets/icon/search-icon/voice.png"></div><div class="shop-content-right"><img class="shop-cright-img" src="../../../assets/icon/search-icon/message.png"><div class="shop-cright-text">消息</div></div></div></section>//页面父容器添加事件方法<ion-content class="shop-home" fullscreen (ionScroll)="resizeHeader($event)" scrollEvents="true"></ion-content>
如果觉得《Angular+ionic实现页面滑动搜索框背景色渐变》对你有帮助，请点赞、收藏，并留下你的观点哦！
