業(yè)務(wù)場(chǎng)景
主頁(yè)要做一個(gè)搜索框，滑動(dòng)主頁(yè)頁(yè)面的時(shí)候，搜索框始終位于導(dǎo)航欄下面，位置不變，不隨頁(yè)面的滑動(dòng)而滑動(dòng)，這種效果被稱為”吸頂“效果。
點(diǎn)擊搜索框，彈出上層搜索詳情的視圖層，搜索詳情的整個(gè)頁(yè)面覆蓋在主頁(yè)面之上，并且也覆蓋住主要搜索框。
實(shí)現(xiàn)
主頁(yè)搜搜框設(shè)置 position: sticky 和 top: 0 即可實(shí)現(xiàn)吸頂效果。
.searchbarView {
position: sticky;
top: 0;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background-color: white;
/* background-color: aqua; */
}
點(diǎn)擊搜索框彈出上層視圖時(shí)發(fā)現(xiàn)，搜索框不能被覆蓋：
需要在搜搜詳情這個(gè)頁(yè)面上也添加 top: 0 ，就會(huì)遮住搜索框
.searchView {
display: flex;
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: rgb(0, 0, 0, 0.3);
}
效果：文章來源：http://www.zghlxwxcb.cn/news/detail-648988.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-648988.html
到了這里，關(guān)于微信小程序搜索框吸頂效果實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
