如何在小程序自定義組件和動態傳入數據小demo

        在開發過程當中，咱們會將頁面經常使用功能抽象爲一個組件，這樣既方便又能夠避免代碼冗餘。小程序中也提供了自定義組件，瞭解Vue的夥伴們會發現其實和Vue的組件化很類似。這裏用返回頂部功能來講說如何自定義組件，下面看demo效果：

                           
 

        效果：進入頁面不顯示圖標，滾動後顯示，回滾到頂部時圖標消失。

        具體步驟：

              1.創建component/goTop文件夾，裏面包含.wxml, .wxss, .js, .json四個文件，以下圖所示：

                                 
         

               2.在.json文件中寫入代碼，以下圖所示：

                          

 

              3.在.wxml文件中寫入代碼，以下圖所示：

               

 

              4.在.wxss文件中寫入代碼，以下圖所示：

                     

 

              5.在.js文件中寫入代碼，以下圖所示：
         

 

             6.至此已經定義好了組件，接下來是在須要展現的頁面寫接入代碼，我是在商品詳情頁裏顯示這個圖標，因此須要到詳情頁的.json文件中寫如下代碼：

                      
              注： "go-top"是該頁面的自定義組件標籤，路徑是根據文件夾設置而定。

              7.詳情頁的.wxml文件中寫如下代碼：
                       

              注：返回頂部圖標經過滾動來判斷是否顯示，因此須要傳入數據動態控制是否顯示，"isShow"做爲自定義組件的屬性在第5步已經設置好，默認值爲false，即打開詳情頁不顯示返回頂部圖標。"topFlag"是用來動態控制是否顯示的屬性，該屬性在詳情頁的.js文件中體現，如第8步所示。

 

              8.詳情頁的.js文件中寫如下代碼：

                     
              當滾動時會改變"topFlag"值，自定義組件接收改變值後傳入組件內部"isShow"，組件內部經過wx:if="{{isShow}}"控制顯示。組件內置的點擊滑動返回頂部方法也在第5步已經設置好。

              經常使用功能經過自定義組件的方式能夠在各處須要用到的地方引入便可。

 

 

          如需轉載請註明出處： http://www.cnblogs.com/zishang91/p/8523573.html，以便有錯誤能夠及時修改，如有錯漏不足之處，請見諒而且指點，謝謝！！！