小程序?qū)崿F(xiàn)簡(jiǎn)單吸頂效果
更新時(shí)間：2022年05月23日 17:16:54 作者：gyuei
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)吸頂效果的具體代碼，供大家參考，具體內(nèi)容如下
要求:
1.使頁(yè)面某一區(qū)域始終顯示在頁(yè)面的最頂端
2.頁(yè)面流暢不卡頓
初始效果如圖：
最終效果：
1.wxml部分代碼如下:
<view class="search">搜索框</view>
<view class="banner">banner</view>
<view class="content">
? <view class="item" wx:for="{{arry}}">我是內(nèi)容{{item}}</view>
</view>2.wxss部分代碼如下:
view {
? text-align: center;
}
.banner {
? height: 150px;
? background: palegreen;
}
.search {
? width: 100%;
? height: 40px;
? background: plum;
}
.item {
? height: 50px;
}
/* 設(shè)置吸頂效果 */
.search {
? position: sticky;
? position: -webkit-sticky;
? top: 0;/*距離頂部多少吸頂*/
}3.js部分代碼如下:
Page({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? arry:[1,2,3,4,5,6,7,8,9,10,11,12]
? }
})4.json部分代碼如下:
{
? "navigationBarBackgroundColor": "#f7f7f5",
? "navigationBarTextStyle": "black",
? "navigationBarTitleText":"示例頁(yè)面",
? "usingComponents": {}
}注意:
1.設(shè)置粘性定位position: -webkit-sticky; position: sticky;
2.設(shè)置top值,距離頂部多少吸頂
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了刪除ID為sNews的索引為JQID的tr元素里的內(nèi)容,需要的朋友可以參考下2014-04-04
javascript 字符串連接的性能問(wèn)題(多瀏覽器)
今天看了javascript 高級(jí)程序設(shè)計(jì) 談到了字符串連接的性能問(wèn)題2008-11-11
JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)
這篇文章主要介紹了JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了url中的特殊符號(hào)有什么含義(推薦)的相關(guān)資料,需要的朋友可以參考下2016-06-06
本文主要介紹了js 顏色選擇插件。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
本文主要介紹了JavaScript過(guò)濾關(guān)鍵字的方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
js實(shí)現(xiàn)input密碼框提示信息的方法(附html5實(shí)現(xiàn)方法)
這篇文章主要介紹了js實(shí)現(xiàn)input密碼框提示信息的方法,涉及JavaScript頁(yè)面元素的獲取,屬性判斷及樣式設(shè)置等技巧,并附帶html5的相關(guān)實(shí)現(xiàn)方法,需要的朋友可以參考下2016-01-01
實(shí)現(xiàn)變速回到頂部的JavaScript代碼
一般網(wǎng)頁(yè)的下方都會(huì)放置一個(gè)置頂按鈕, 尤其是頁(yè)面底部沒(méi)有導(dǎo)航的網(wǎng)頁(yè), 這樣可以幫助訪客重新找到導(dǎo)航或者重溫一遍廣告 (想得真美).2011-05-05
這篇文章主要介紹了Javascript前端優(yōu)化代碼，對(duì)性能優(yōu)化感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要介紹了JavaScript 中的六種循環(huán)方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-01-01