国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

uni-app頂部導(dǎo)航條固定

這篇具有很好參考價值的文章主要介紹了uni-app頂部導(dǎo)航條固定。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

1.準(zhǔn)備 scroll-view 滾動容器,包裹需要滾動的區(qū)域

 <!-- 自定義導(dǎo)航欄 -->
  <CustomNavbar />
  <scroll-view class="scroll-view" scroll-y>
    <!-- 自定義輪播圖 -->
    <XtxSwiper :bannerList="bannerList" />
    <!-- 首頁分類 -->
    <CategoryPanel :CategoryPanelList="CategoryPanelList" />
    <!-- 熱門推薦 -->
    <HotPanel :HotPanelList="HotPanelList" />
    <!-- 猜你喜歡 -->
    <XtxGuess />
  </scroll-view>

2.給父容器page設(shè)置高度為100%,完全撐開,開啟并flex彈性盒,給滾動容器設(shè)值flex值為1
這里父容器必須要給高度,要不然頂部固定不起效文章來源地址http://www.zghlxwxcb.cn/news/detail-782695.html

page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}

到了這里,關(guān)于uni-app頂部導(dǎo)航條固定的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • uni-app微信小程序,在頁面頂部添加返回按鍵,返回上一個頁面

    uni-app微信小程序,在頁面頂部添加返回按鍵,返回上一個頁面

    1.示例: 2.實現(xiàn)方式: 在page.json文件中的style里添加如下代碼: 3.tips: 在page.json中的頁面順序就是小程序加載過程中的頁面順序

    2024年02月12日
    瀏覽(27)
  • 【uni-app】自定義導(dǎo)航欄

    【uni-app】自定義導(dǎo)航欄

    新手剛玩 uniapp 進(jìn)行微信小程序,甚至多端的開發(fā)。 原生uniapp 的導(dǎo)航欄,并不能滿足 ui 的需求,所以各種查閱資料,導(dǎo)航欄自定義內(nèi)容 整理如下: 需要修改的文件如下: 1、pages.json 修改pages.json,啟動導(dǎo)航欄自適應(yīng),設(shè)置\\\" navigationStyle\\\": \\\"custom\\\" 2、system_info.js 新建 system_info

    2024年02月16日
    瀏覽(34)
  • uni-app動態(tài)修改導(dǎo)航欄標(biāo)題

    對導(dǎo)航欄標(biāo)題進(jìn)行修改,直接使用就可以 動態(tài)修改標(biāo)題名稱,數(shù)據(jù)可能是從上一個頁面?zhèn)鬟f過來的,直接在 onLoad 頁面周期函數(shù)中使用 ??可能會出現(xiàn)在網(wǎng)頁中切換標(biāo)題正常,但是在真機(jī)中沒有效果,通過查看官網(wǎng)看到這么一句話 如果需要在頁面進(jìn)入時設(shè)置標(biāo)題,可以在

    2024年02月05日
    瀏覽(23)
  • uni-app 頭部導(dǎo)航條改為背景圖

    uni-app 頭部導(dǎo)航條改為背景圖

    將某一頁面的導(dǎo)航條,改為背景圖 1.在pages.json文件中將要修改的頁面,style中的“navigationStyle”設(shè)置為custom,取消默認(rèn)的原生導(dǎo)航欄 2.在要修改的頁面中如index1頁面 效果如圖 ? 蘋果手機(jī)導(dǎo)航條文字在中間位置,安卓手機(jī)導(dǎo)航條問題在靠左位置,更改某一頁面,將會與其他頁

    2024年02月11日
    瀏覽(23)
  • uni-app uView自定義底部導(dǎo)航欄

    uni-app uView自定義底部導(dǎo)航欄

    因項目需要自定義底部導(dǎo)航欄,我把它寫在了組件里,基于uView2框架寫的(vue2); ? 在components下創(chuàng)建tabbar.vue文件,代碼如下: ?app.vue (有沒有大佬知道為什么這個樣式加載app.vue里才生效) ?pages.json配置 頁面使用: ( mine.vue ) 注: current是底部導(dǎo)航欄的下標(biāo),你在tabb

    2024年02月14日
    瀏覽(37)
  • 【uni-app】【01】底部導(dǎo)航欄與頁面切換

    【uni-app】【01】底部導(dǎo)航欄與頁面切換

    1.(配置文件在哪)uni-app 路由控制是在 pages.json 文件中的。 2.(基本配置項有哪些)初學(xué)的時候主要有三個配置項,① pages ② globalStyle ③ tabbar [!TOC] 接下來主要是對這三個配置項做一個簡單介紹。 負(fù)責(zé)頁面管理。不需要自己寫的,你在項目的 pages 文件夾下創(chuàng)建頁面會自動生成配

    2023年04月27日
    瀏覽(25)
  • uni-app 微信小程序自定義導(dǎo)航欄

    uni-app 微信小程序自定義導(dǎo)航欄

    上面的導(dǎo)航欄主要由狀態(tài)欄(就是手機(jī)電量顯示欄)和小程序的導(dǎo)航欄組成,android手機(jī)一般為48px,ios手機(jī)一般為44px 1、設(shè)置navigationStyle:custom 2、頁面導(dǎo)航欄div 3、獲取statusBarHeight高度 4、獲取navTitleHeight的高度

    2024年02月14日
    瀏覽(95)
  • uni-app 實現(xiàn)凸起的 tabbar 底部導(dǎo)航欄

    uni-app 實現(xiàn)凸起的 tabbar 底部導(dǎo)航欄

    效果圖 在?pages.json 中設(shè)置隱藏自帶的 tabbar 導(dǎo)航欄 新建一個 custom-tabbar.vue 自定義組件頁面 底部安全區(qū)域的適配問題可查看:uni-app 蘋果手機(jī)底部安全區(qū)域的適配問題 在 main.js 中引用組件 在要用到的頁面中直接調(diào)用

    2024年02月07日
    瀏覽(26)
  • uni-app自定義微信小程序頭部導(dǎo)航欄

    uni-app自定義微信小程序頭部導(dǎo)航欄

    目錄 一、子組件代碼 1、完整子組件代碼? 2、子組件配置項Props? 二、父組件引用代碼? 1 、將頭部導(dǎo)航注冊成全局組件(main.js) 2、獲取設(shè)備信息(App.vue) 3、頁面導(dǎo)入自定義導(dǎo)航組件 (3-1)、默認(rèn)配置效果圖例 (3-2)、更改配置效果圖例? 1、完整子組件代碼? 2、子組件

    2024年02月03日
    瀏覽(96)
  • uni-app實現(xiàn)自定義導(dǎo)航欄,兼容H5、App、微信小程序

    uni-app實現(xiàn)自定義導(dǎo)航欄,兼容H5、App、微信小程序

    很多情況下,系統(tǒng)自帶的導(dǎo)航欄無法滿足UI設(shè)計的要求,這時候就需要我們自定義導(dǎo)航欄來實現(xiàn)需求,要考慮跨端的多種情況,這里我們封裝成一個組件來使用,實現(xiàn)效果如下: 一、H5、App、微信小程序的區(qū)別 1.H5:導(dǎo)航欄高度可以設(shè)為44px,它沒有狀態(tài)欄,因為H5端運行在瀏覽

    2024年04月13日
    瀏覽(105)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包