小程序?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)文章
這篇文章主要為大家詳細(xì)介紹了bootstrap select下拉搜索插件的使用方法，動(dòng)態(tài)加載自己數(shù)據(jù)的二級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
使用TextRange獲取輸入框中光標(biāo)的位置的代碼
使用TextRange獲取輸入框中光標(biāo)的位置的代碼...2007-03-03
js判斷登陸用戶名及密碼是否為空的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js判斷登陸用戶名及密碼是否為空的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
使用classList來(lái)實(shí)現(xiàn)兩個(gè)按鈕樣式的切換方法
下面小編就為大家分享一篇使用classList來(lái)實(shí)現(xiàn)兩個(gè)按鈕樣式的切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
javascript實(shí)現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法小結(jié)【5種方式】
這篇文章主要介紹了javascript實(shí)現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法,結(jié)合實(shí)例形式分析了5種常用的數(shù)字轉(zhuǎn)換的常用方法,涉及字符串與正則操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
layui加載數(shù)據(jù)顯示loading加載完成loading消失的實(shí)例代碼
今天小編就為大家分享一篇layui加載數(shù)據(jù)顯示loading加載完成loading消失的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
在JavaScript代碼中，多多少少會(huì)有判斷語(yǔ)句。業(yè)務(wù)越復(fù)雜，邏輯就越復(fù)雜，判斷就越多。今天給大家整理下JavaScript中代碼里常會(huì)用到的那些判斷，有需要的可以參考借鑒。2016-08-08
javascript Range對(duì)象跨瀏覽器常用操作
最近在開(kāi)發(fā)在線代碼編輯器的過(guò)程中頻繁接觸Range對(duì)象，由于跨瀏覽器的需求，使用到ie下TextRange對(duì)象和標(biāo)準(zhǔn)Dom Range對(duì)象。2009-10-10
JS獲取中文拼音首字母并通過(guò)拼音首字母快速查找頁(yè)面內(nèi)對(duì)應(yīng)中文內(nèi)容的方法【附demo源碼】
這篇文章主要介紹了JS獲取中文拼音首字母并通過(guò)拼音首字母快速查找頁(yè)面內(nèi)對(duì)應(yīng)中文內(nèi)容的方法,涉及javascript針對(duì)字符串的遍歷、查找、正則匹配及轉(zhuǎn)換等操作技巧,并附帶完整demo源碼供讀者下載參考,需要的朋友可以參考下2016-08-08
詳解XMLHttpRequest（一）同步請(qǐng)求和異步請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了XMLHttpRequest 同步請(qǐng)求和異步請(qǐng)求,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09