Applets encapsulate a sidebar component

Achieve the goal

Click list – the right display page does not move, the sidebar slides. Sidebar expansion click list – Sidebar restore to display the right display page.

Source:

// side-bar.wxml<! -- Sidebar --><view class="side-bar">
  <view class="music-list {{left_show? 'music-list-content':'close_overlay'}}">
</view>
Copy the code

// 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;
}
Copy the code

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

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

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

// home.js
// Whether the sidebar is displayed
left_show: false
if(!this.data.left_show) {
  this.setData({
    left_show: true})}else {
  this.setData({
    left_show: false})}Copy the code