有了安卓開發經驗，自定義微信小程式元件簡直易如反掌。
自定義微信小程式的步驟如下：

1. 建立四個檔案
   
   分別是邏輯控制js，配置檔案json，佈局檔案wxml，樣式檔案wxss。
2. 配置檔案.json的編寫
   
   component引數：說明這個資料夾是元件資料夾；
   usingComponents引數：說明該元件是依賴於什麼元件的，這裡是空的什麼都不依賴。
3. .wxml檔案

 <scroll-view  class="scroll-view_H"  scroll-x  bindscroll="_scroll"  scroll-into-view="{{toView}}
 
"  bindscrolltoupper="_beeninTop" bindscrolltolower="_beeninBottom"> 
  <view class="wrap_item"  id='wrap_item_{{idx}}'  wx:for="{{datalist}}" wx:for-index="idx" wx:for-item="item">
       <text  class='indicater_{{item.status}}' data-text="{{item.key}}"  bindtap='_clickindicater'>{{item.key
 
}}</text> 
  </view>
</scroll-view>  

<view class='bottom_dec'></view>

讓scrollvview控制元件繫結：_beeninTop，_beeninBottom，_scroll這三個函式，當滿足觸發條件的時候觸發對應的函式，scroll-into-view="{{toView}}" 該函式功能是讓scrollview滾動到指定子檢視位置。
4. .js檔案的編寫
一般最簡單的結果包含如下幾個控制部分：

Component({
  properties: {
    // 這裡定義了innerText屬性，屬性值可以在元件使用時指定
    innerText: {
      type: String,
      value: 'default value'
 
,
    }
  },
  data: {
    // 這裡是一些元件內部資料
    someData: {}
  },
  methods: {
    // 這裡是一個自定義方法
    customMethod: function(){}
  }
})

將scrollview繫結的事件在js檔案中實現，為了能夠使得自定義元件的內部事件可以傳遞到外部引用該自定義元件中，需要在自定義元件的js中呼叫 this.triggerEvent(“事件函式名A”, data,{});事件函式名A就可以被外部引用該自定義元件的標籤中進行繫結。

    //滾動到頂部/左邊，會觸發 scrolltoupper 事件
    _beeninTop:function(){
      //觸發點選回撥
      this.triggerEvent("beeninTop", {});
      console.log("已經到了左邊盡頭了");
    },
    //滾動到底部/右邊，會觸發 scrolltolower 事件
    _beeninBottom:function(){
      //觸發點選回撥
      this.triggerEvent("beeninBottom",  {});
      console.log("已經到了右邊盡頭了");
    },

    _clickindicater: function (event) {
      var view = event.target;
      //獲取控制元件自定義資料
      var text = view.dataset.text;
      console.log("點選了選單" + text);
      var data = {"key":text};
      for (var i = 0; i < 6; i++) {
        if (this.properties.datalist[i].key == text){
          this.refreshStatus(i);
          break;
        }
      }
          //觸發點選回撥
      this.triggerEvent("clickindicater", data,{});
    },

1. 外部引用自定義元件

     <scrollmenu
      id="scrollmenu"
      style="width:{{widthpx}}px;"
      bind:clickindicater="clickmenu"
      bind:beeninTop="hasToTop"
      bind:beeninBottom="hasToBottom">
    </scrollmenu>

在外部的js檔案中繼續定義clickmenu，hasToTop，hasToBottom這三個函式，就可以處理內部自定義標籤所傳遞過來的事件了。在外部的js中定義如下：

/**
 * 以下是scrollmenu事件函式
 */
  hasToTop:function(){
    console.log("到達頂部");
  },
  hasToBottom:function(){
    console.log("到達底部");
  },
  clickmenu:function(e){
    console.log("點選選單："+e.detail.key);
    for (var i = 0; i < 6; i++) {
      if (this.data.datalist[i].key == e.detail.key) {
        this.setData({
          pageindex: i,
        })
        return;
      }
    }
  },

1. 說一下wxss檔案
   這個是卡我時間最久的一個問題，微信小程式的scrollview有很多bug，它需要內部view都是display:line-block;而且需要明確每個子view的寛高，scrollview也需要配置
   .scroll-view_H{
/* 單行顯示,不包裹 */
white-space: nowrap;
overflow: hidden;
}
   意思就是單行顯示，超出長度自動隱藏。
   外部的wxss檔案也需要引入自定義元件的wxss檔案，要不然在狀態切換的時候找不到wxss樣式就會出現佈局錯亂，這個很容易忽視，因為官方文件上面也沒有寫需要引入這個檔案。@import "../../components/Scrollmenu/scrollmenu.wxss";

   最重要的一點就是scrollview如果是上下滑動，那麼明確指定高度，如果是左右滑動，那麼明確指定寬度，要不然scrollview就會自動擴充套件長度包裹所有子view，那麼就不會滑動了，一般scrollview需要螢幕高度或者是螢幕寬度，但是每個機子的畫素又不一樣，怎麼能指定明確的寛高呢。真是不人性化，這裡用了一個很垃圾的辦法，就是在引用自定義元件的js檔案中，在頁面剛剛載入的時候動態設定寛高，style="width:{{widthpx}}px;" 這句話就是設定他的寬度，在外部的js裡面是這樣的
   
   也就是在回撥中設定他的寬度為全屏。
   最後程式碼執行的效果如下：
   
   如果想試著執行的話
   原始碼在這裡
   最新的版本在這裡：
   原始碼在這裡