想法

不想使用第三方的小程序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
      })
    }
  },
})

以上代码已经将组件编写好了，在其他页面使用的时候，在json文件中直接引入即可：

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

wxml：

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

show就是主页面向组件传递的参数。

如有误，欢饮留言！！！！