成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

小程序?qū)嵺`（一）：主頁(yè)tab選項(xiàng)實(shí)現(xiàn)

番茄西紅柿 / 699人閱讀

摘要：這里不再多具體介紹，只添加一個(gè)小需求，點(diǎn)擊切換相關(guān)頁(yè)面，該頁(yè)面標(biāo)題要和一致，頁(yè)面內(nèi)容也和一致，用于說(shuō)明效果正確實(shí)現(xiàn)。

官方文檔

效果圖：

 

 

 

實(shí)現(xiàn)底部Tab選項(xiàng)，只需要在項(xiàng)目根目錄下的app.json下修改

如圖：

 

 ------------------------------------------------------------------------------------------------------

 先介紹一下app.json文件

默認(rèn)有兩個(gè)代碼塊：
1、pages
這里注冊(cè)了當(dāng)前小程序的所有頁(yè)面路徑
2、window
這里用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

以上兩個(gè)詳細(xì)使用參考文檔，本文章不做介紹

   

  我們看下app.json提供的另一個(gè)配置項(xiàng)：tabBar

  

   tabBar提供一些公有的屬性對(duì)tab配置：

   

    

 　而針對(duì)每一個(gè)多帶帶的tab 也有一些屬性進(jìn)行配置：

    

 

     官方示意圖：

     

 ------------------------------------------------------------------------------------------------------

 

 具體實(shí)現(xiàn)底部Tab功能：

 設(shè)定一個(gè)需求，假設(shè)當(dāng)前我們有兩個(gè)tab,一個(gè)主頁(yè)，一個(gè)我的 ， 未選中灰黑色，選擇紅色。

 

 一、在pages目錄下創(chuàng)建兩個(gè)目錄，并創(chuàng)建想要的js、json、wxml、wxss相關(guān)文件

       名字隨意，這里舉例：home目錄（主頁(yè)Tab相關(guān)），mine目錄(我的Tab相關(guān))

      

 

二、在根目錄下新建一個(gè)目錄，取名images(隨意取)，用于存放圖片，這里tab需要使用

　　1、在阿里素材庫(kù)下載幾個(gè)，注意tab圖片需要下載點(diǎn)擊和未點(diǎn)擊兩種狀態(tài)下的圖片。

       2、講圖片資源復(fù)制到自己建的用于存圖片的目錄下

       

 

三、app.json文件配置

      1、在pages屬性中配置項(xiàng)目所有的頁(yè)面路徑，我們這個(gè)例子就兩個(gè)，home,mine

"pages":[
    "pages/home/home",
    "pages/mine/mine"
  ]

 

　   2、添加tabBar 屬性 ， 定義一些狀態(tài)

            根據(jù)文章前面部分講解，進(jìn)行一些必要屬性的配置

"tabBar":{
    "color": "#333333",
    "selectedColor": "#ff0000",
    "backgroundColor": "#fff",
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"主頁(yè)",
        "iconPath":"images/home.png",
        "selectedIconPath":"images/home_selected.png"
        
      },
      {
        "pagePath":"pages/mine/mine",
        "text":"我的",
        "iconPath": "images/mine.png",
        "selectedIconPath":"images/mine_selected.png"
      }
    ]
  }
{
  "pages":[
    "pages/home/home",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  
  "tabBar":{
    "color": "#333333",
    "selectedColor": "#ff0000",
    "backgroundColor": "#fff",
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"主頁(yè)",
        "iconPath":"images/home.png",
        "selectedIconPath":"images/home_selected.png"
        
      },
      {
        "pagePath":"pages/mine/mine",
        "text":"我的",
        "iconPath": "images/mine.png",
        "selectedIconPath":"images/mine_selected.png"
      }
    ]
  }
}
app.json

 

 

四、多帶帶頁(yè)面的配置

　　一個(gè)頁(yè)面包含js、hson、wxml、wxss等相關(guān)文件。

      這里不再多具體介紹，只添加一個(gè)小需求，點(diǎn)擊tab切換相關(guān)頁(yè)面，該頁(yè)面標(biāo)題要和tab一致，頁(yè)面內(nèi)容也和tab一致，用于說(shuō)明tab效果正確實(shí)現(xiàn)。

      1、設(shè)置多帶帶頁(yè)面的頁(yè)面標(biāo)題，這個(gè)需求是在json文件中配置實(shí)現(xiàn)的。

　　　主需要在多帶帶頁(yè)面路徑下的json文件中添加屬性：

          

 　　　　官方文檔

     2、在頁(yè)面中顯示與tab一致的文字

　　   頁(yè)面內(nèi)容搭建（ui繪制代碼）是在多帶帶頁(yè)面路徑下的wxml文件中配置實(shí)現(xiàn)的。

　　　

　　　　官方文檔

 

 

--------------------------------------------------------------------------------------

 

小程序?qū)嵺`（一）：主頁(yè)tab選項(xiàng)實(shí)現(xiàn)

小程序?qū)嵺`（二）：swiper組件實(shí)現(xiàn)輪播圖效果

小程序?qū)嵺`（三）：九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)

小程序?qū)嵺`（四）：動(dòng)態(tài)控制組件的顯示/隱藏

小程序?qū)嵺`（五）：for循環(huán)綁定item的點(diǎn)擊事件

小程序?qū)嵺`（六）：view內(nèi)部組件排版

小程序?qū)嵺`（七）：頁(yè)面間傳值

小程序?qū)嵺`（八）：驗(yàn)證碼倒計(jì)時(shí)功能

小程序?qū)嵺`（九）：返回到上一個(gè)界面并傳值回去

小程序?qū)嵺`（十）：textarea實(shí)現(xiàn)簡(jiǎn)單的編輯文本界面

小程序?qū)嵺`（十一）：showModal的使用

小程序?qū)嵺`（十二）：七牛云上傳圖片

 

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2059.html

相關(guān)文章

  • 小程序實(shí)踐（二）：swiper組件實(shí)現(xiàn)輪播圖效果

    摘要：組件類似于中的，實(shí)現(xiàn)類似輪播圖的效果，相對(duì)于的實(shí)現(xiàn)起來(lái)更加方便，快捷。swiper組件類似于Android中的ViewPager，實(shí)現(xiàn)類似輪播圖的效果，相對(duì)于Android的Viewpager,swiper實(shí)現(xiàn)起來(lái)更加方便，快捷。 效果圖： 首先看下swiper支持的屬性： --------------------------------------------------------...

    番茄西紅柿 評(píng)論0 收藏0

  • 小程序實(shí)踐（三）：九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)

    摘要：效果圖實(shí)現(xiàn)效果圖紅色線包含部分的九宮格效果，并附帶點(diǎn)擊時(shí)間。效果圖： 實(shí)現(xiàn)效果圖紅色線包含部分的九宮格效果，并附帶item點(diǎn)擊時(shí)間。 ------------------------------------------------------------------------------------------------------ 具體實(shí)現(xiàn)： 1、首先添加圖片資源文件 　 在...

    番茄西紅柿 評(píng)論0 收藏0

  • 一次完整的react hooks實(shí)踐

    摘要：本次需求其實(shí)就兩個(gè)邏輯輸入篩選項(xiàng)。當(dāng)發(fā)生改變時(shí)，重新渲染頁(yè)面首次進(jìn)入頁(yè)面時(shí)，無(wú)任何篩選項(xiàng)。關(guān)于的一些，官方也有很棒的文檔寫在后面本文通過(guò)工作中的一個(gè)小需求，完成了一次的實(shí)踐，不過(guò)上述代碼依然有很多需要優(yōu)化的地方。 寫在前面 showImg(https://segmentfault.com/img/bVbpBgw?w=1000&h=563); 本文首發(fā)于公眾號(hào)：符合預(yù)期的CoyPan R...

    kuangcaibao 評(píng)論0 收藏0

  • 微信小程序音樂(lè)播放器,leancloud后端支持,體驗(yàn)小程序數(shù)據(jù)綁定,Promise較為優(yōu)雅解決回調(diào)

    摘要：初窺添加音樂(lè)到收藏最近列表歌詞滾動(dòng)從一個(gè)開始微信開發(fā)者工具生成目錄如下主頁(yè)日志頁(yè)面工具大體為每一個(gè)即是一個(gè)頁(yè)面文件，每個(gè)頁(yè)面有一個(gè)文件規(guī)定描述頁(yè)面的這四個(gè)文件必須具有相同的路徑與文件名。 showImg(https://segmentfault.com/img/remote/1460000009405866);showImg(https://segmentfault.com/img/r...

    go4it 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<