小程序封装一个侧边栏组件

实现目标

点击列表-右侧展示页面不动，侧边栏滑动。侧边栏展开式点击列表-侧边栏还原，显示右侧展示页面。

源码：

// side-bar.wxml
<!-- 侧边栏 -->
<view class="side-bar">
  <view class="music-list {{left_show?'music-list-content':'close_overlay'}}">
</view>

// side-bar.wxss
.close_overlay {
  width: 0;
  transition-property: width;
  transition-duration: 300ms;
  transition-timing-function: ease;
}

.music-list {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  background: #2c2c2c;
  z-index: 999;
  overflow: hidden;
}
.music-list-content {
  width: 80%;
  transition-property: width;
  transition-duration: 300ms;
  transition-timing-function: ease;
}

// side-bar.js
properties: {
  left_show: {
    type: Boolean,
    value: false
  },
},

// home.json
"usingComponents": {
    "side-bar": "/components/side-bar/side-bar"
 }

// home.wxml
<side-bar left_show="{{left_show}}"></side-bar>

// home.js
// 侧边栏是否显示
left_show: false
if(!this.data.left_show) {
  this.setData({
    left_show: true
  })
} else {
  this.setData({
    left_show: false
  })
}