1.根目錄的components是用來自定義元件的資料夾,新建資料夾之後新建component才可以成功建立可以使用的元件

注意點:

  1.自定義元件的json檔案中必須宣告"component": true 按步驟建立,小程式會自動生成

  2.自定義元件的js檔案中使用的函式不再是Page而是Component,所有的元件方法必須使用methods包裹

2.元件傳值

  父傳子(只是一個簡單的demo,實現父元件傳遞值給自定義元件)

實現效果

自定義元件部分
wxml

<view class="flex_Center backgroundViewStyle">
  <view class="flex_Center demoButtonStyle" bindtap="onClickButton">檢視頂部提示</view>
</view>

<view class="toptips {{ isTopTips ? 'toptips--show' : '' }}">{{ message }}</view>
 

js

let timer = null;

Component({
  properties: {
    message: {              // message為定義的值
      type: String,        // 傳遞的值型別
      value:"預設值"       // 自定義元件預設值 
    }
  },
  data: {
    isTopTips: false,
  },
  methods:{
    // 頁面載入
    onUnload: function () {
      clearTimeout(timer);
    },
    // 點選按鈕
    onClickButton: function(){
      let that = this;
      that.setData({
        isTopTips: true
      });
      timer = setTimeout(function () {
        that.setData({
          isTopTips: false
        });
      }, 1500);
    }
  }
})
 

wxss

.backgroundViewStyle{
  background:white;flex-direction:column;
}
.toptips {
  display: block;
  position: fixed;
  -webkit-transform: translateZ(0) translateY(-100%);
  width: 100%;
  /* 至少有一行的高度，保證第一次動畫顯示正常 */
  min-height: 32px;
  top: 0;
  left:0;
  line-height: 2.3;
  font-size: 14px;
  text-align: center;
  color: #FFF;
  background-color: #E64340;
  z-index: 110;
  /* 動畫部分 */
  transition: all 0.4s ease;
}
.toptips--show {
  -webkit-transform: translateZ(0) translateY(0);
}
 

父元件部分

// 第一步json檔案中進行引入元件
{
  "usingComponents": {
    "topmsg":"/components/topmsg/topmsg"
  }
}

// 第二步,引入成功之後使用標籤渲染
// json檔案中topmsg是引入元件的名稱,也可以自定義
<!-- 頂部提示 -->
  <view class="uploader">
    <view class="uploader-text">
      <topmsg message="我是一個自定義元件"/>
    </view>
  </view>