想法

不想使用第三方的小程序UI組件，理由是因為第三方組件是所有常見組件的集合，css樣式代碼過于龐大，雖然說是輕量級的組件，但是對于小程序來說，依舊很龐大。并且在一個小程序中也不一定用到所有的組件，卻是引入全部的css代碼。

所以我想將每一個組件單獨剝離出來，當使用到某一個組件的時候，就引入對應的組件和樣式即可。

效果圖：

思路和上一篇文章：微信小程序UI組件：底部彈出【pop-up】

源碼：

<!-- 陰影 -->

<view class="yd_overlay  {{show?'yd_show_overlay':'yd_close_overlay'}}" bindtap="close_overlay"></view>

<!-- 左側欄目 -->
<view bindtap="close_overlay" class="left_container  {{show?'yd_left_content':'yd_close_overlay'}}">左側欄目</view>

css:

.yd_overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.yd_show_overlay {
  width: 100%;
  transition-property: width;
  transition-duration: 900ms;
  transition-timing-function: ease;
}

.yd_close_overlay {
  width: 0;
  transition-property: width;
  transition-duration: 900ms;
  transition-timing-function: ease;
}

.left_container {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  background: red;
  z-index: 999;
  overflow: hidden;
}

.yd_left_content {
  width: 20%;
  transition-property: width;
  transition-duration: 900ms;
  transition-timing-function: ease;
}

js:

Component({
  properties: {
    show: Boolean,
  },
  data: {},
  attached: function(e) {},
  methods: {
    close_overlay() {
      this.setData({
        show: false
      })
    },
    pop_left() {
      this.setData({
        show: true
      })
    }
  },
})

以上代碼已經(jīng)將組件編寫好了，在其他頁面使用的時候，在json文件中直接引入即可：

{
  "usingComponents": {
    "popup-left":"../Components/popupLeft/popupLeft"
  }
}

wxml：

  <!-- 引入組件 -->
  <popup-left show="{{showleft}}"></popup-left>

show就是主頁面向組件傳遞的參數(shù)。

如有誤，歡飲留言！！！！