微信小程序 導航(a 連接)自定義組件


  導航:navigator 組件

  組件上的屬性:

    target:跳到其他小程序( 默認是當前小程序 ),當屬性值為 miniProgram 時,跳到別的小程序(如果要跳到別的小程序,需要填寫 appid 屬性,屬性值: 別的小程序的 id)

    open-type:類型  字符串  打開方式

      屬性值:navigate(默認)  url 屬性后面可以帶參數,跳轉后的頁面,左上角有個返回鍵,可以返回到開始那個頁面

          redirect  url 屬性后面可以帶參數,關閉了當前頁面,跳轉后的頁面左上角無返回鍵

          switchTab  url 屬性后面不可以帶參數,只跳轉 tabBar 頁面路徑,否則無效,關閉當前頁

          reLaunch  需要跳轉應用內的頁面路徑,路徑后面可以帶參數

    url:類型  字符串  要跳轉的頁面路徑 后面通過 open-type 屬性 判斷帶不帶參數 要攜帶的參數  ?name='zhang'&age=20 這種寫法

    頁面的參數在 要跳轉的頁面 Page({})  onload()  方法的屬性上面,形參 options 上面

  自定義組件:component(組件)  跟pages同目錄  創建 component 目錄

  特點:1.每個自定義組件都有四個部分組成  wxml  wxss  js  json

    配置 文件為 component 文件

    里面的組件設定樣式:只能使用 class 選擇器

         json 文件中   設定屬性  component:true 

    要在開發者工具上面創建組件

    框架的方式就是為了組件   

  這樣的話,自定義組件就配置好了,我們想在頁面中引用這個組件

  需要在當前頁面中 json 文件上 用 usingComponents 屬性上  屬性名(代表組件名):屬性值(組件路徑)

  在 wxml 文件中使用 組件名即可調用

  slot 插槽

  為什么要使用 slot 插槽?

    因為在我們使用自定義組件時,我們便不能夠在自定義組件里面添加內容,為了解決這個問題,我們使用插槽  slot 組件,slot 組件 必須是 自定義組件內部的子節點。

    插槽就是自定義組件,內部的子節點

  slot 用法:

    自定義組件 json 文件

    

    自定義組件的 wxml 文件:

    

    定義插槽,在自定義組件中,都有唯一的 name 屬性與使用組件中的子節點進行匹配,多個 slot 插槽,須在自定義組件 js 文件中 添加 options 屬性

    自定義組件的 js 文件:

    

  自定義組件的 就配置好了,當前頁面的引用:

  當前頁面的 json 文件

  

 

  當前頁面的 wxml 文件

  

  最后的效果圖:

    

 

  小程序不支持背景圖

  小程序中內斂組件 text 組件

  小程序可以使用 彈性布局

  padding 撐法:如圖:

    

 

 

 

      


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM