仿友圈，微博发布图文信息小程序，九宫格图片，包括多图上传，点赞评论，简单的请求封装；小程序popup弹出层组件

最近无聊写了个小程序，带发布图片内容功能，提交审核后被驳回，才了解到个人小程序不开放信息发布功能。= =
技术简单明了，分享给大家
效果图

列表数据结构

附带了一个弹出层组件
wxml：

<!--components/popup/popup.wxml-->
<view bindtap="toggleModel" class="pop-mask {{showModel?'actives':''}}">
</view>
<view class="pop-content {{showModel?'show':'hide'}}"><slot></slot></view>

js

// components/popup/popup.js
Page({
  data: {
    showModel:false
  },
  toggleModel(){
    console.log(666999,this.data.showModel)
    this.setData({
      showModel:!this.data.showModel
    })
  }
  })

css

/* components/popup/popup.wxss */
.pop-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0,0.5);
  display: none;
  z-index: 10;
 
}
.hide{
  animation: popup 0.4s ease;
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(0);
}
@keyframes popup{
  0%{
    transform: translateY(0);
    
  }
  30%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    transform: translateY(30vh);
  }
}
.actives{
  display: block;
  
}
.pop-content{
  position: fixed;
  bottom: 0;
  width: 750rpx;
  background-color: rgb(255, 255, 255);
  transform: translateY(150%);
  transition: all 0.4 ease;
  z-index: 12;
}
.acvtive{
  transform: translateY(0);
}

.show{
  animation: pop 0.4s ease;
  height:auto;
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(0);

  z-index: 99;
}
  @keyframes pop{
    from{
      transform: translateY(100%);
      
    }
    to{
      transform: translateY(0);
    }
  }

github地址：https://github.com/LSZ579/-/tree/master