最近无聊写了个小程序,带发布图片内容功能,提交审核后被驳回,才了解到个人小程序不开放信息发布功能。= =
技术简单明了,分享给大家
效果图
列表数据结构
附带了一个弹出层组件
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