在開發過程中，我們會將頁面常用功能抽象為一個組件，這樣既方便又可以避免代碼冗余。小程序中也提供了自定義組件，了解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，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！