这是项目里面一个简单的效果，小程序点击按钮弹出可填写框，摘下代码，方便之后遇到的时候可以直接拿来使用。
效果如下：
wxml
<!-- 功能列表 -->
<view wx:for="{{list}}" wx:key="{{index}}" class="item">
<view data-index="{{index}}" class="inner txt">
<image class="item-icon" mode="widthFix" src="{{item.icon}}"></image>
<i> {{item.name}}</i>
<i>{{item.rank}}</i>
<span class="item-data">
<i class="rankpace"> {{item.pace}}</i>
<i bindtap="powerDrawer" data-statu="open">
<image class="item-icon" mode="widthFix" src="../../images/add.png"></image>
</i>
</span>
</view>
</view>
<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
<!--drawer content-->
<view class="drawer_title">添加配置</view>
<view class="drawer_content">
<view class="top grid">
<label class="title col-0">cpu</label>
<input class="input_base input_h30 col-1" name="rName" placeholder="填写cpu参数"></input>
</view>
<view class="top grid">
<label class="title col-0">显卡</label>
<input class="input_base input_h30 col-1" name="mobile" placeholder="填写显卡参数"></input>
</view>
<view class="top grid">
<label class="title col-0">主板</label>
<input class="input_base input_h30 col-1" name="phone" placeholder="填写主板参数"></input>
</view>
<view class="top grid">
<label class="title col-0">显示器</label>
<input class="input_base input_h30 col-1" name="Email" placeholder="填写显示器参数"></input>
</view>
</view>
<view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>
</view>
wxss
view {
box-sizing: border-box;
}
.item-box {
width: 700rpx;
margin: 0 auto;
padding: 40rpx 0;
}
.items {
width: 100%;
}
.item {
position: relative;
border-top: 2rpx solid #eee;
height: 120rpx;
line-height: 120rpx;
overflow: hidden;
font-size: 36rpx;
}
.item:last-child {
border-bottom: 2rpx solid #eee;
}
.inner {
position: absolute;
top: 0;
}
.inner.txt {
background-color: #fff;
width: 100%;
z-index: 5;
padding: 0 10rpx;
transition: left 0.2s ease-in-out;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inner.txt i {
margin-right: 20rpx;
}
.item-icon {
width: 64rpx;
height: 64rpx;
vertical-align: middle;
margin-right: 16rpx;
margin-left: 13px;
border-radius: 50%;
}
.item-data {
float: right;
margin-right: 5%;
}
.rankpace {
color: #fa7e04;
}
/* 弹框 */
/*mask*/
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
/*content*/
.drawer_box {
width: 650rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 1001;
background: #fafafa;
margin: -150px 50rpx 0 50rpx;
border-radius: 3px;
}
.drawer_title {
padding: 15px;
font: 20px "microsoft yahei";
text-align: center;
}
.drawer_content {
height: 210px;
overflow-y: scroll; /*超出父盒子高度可滚动*/
}
.btn_ok {
padding: 10px;
font: 20px "microsoft yahei";
text-align: center;
border-top: 1px solid #e8e8ea;
color: #3cc51f;
}
.top {
padding-top: 8px;
}
.bottom {
padding-bottom: 8px;
}
.title {
height: 30px;
line-height: 30px;
width: 160rpx;
text-align: center;
display: inline-block;
font: 300 28rpx/30px "microsoft yahei";
}
.input_base {
border: 2rpx solid #ccc;
padding-left: 10rpx;
margin-right: 50rpx;
}
.input_h30 {
height: 30px;
line-height: 30px;
}
.input_h60 {
height: 60px;
}
.input_view {
font: 12px "microsoft yahei";
background: #fff;
color: #000;
line-height: 30px;
}
input {
font: 12px "microsoft yahei";
background: #fff;
color: #000;
}
radio {
margin-right: 20px;
}
.grid {
display: -webkit-box;
display: box;
}
.col-0 {
-webkit-box-flex: 0;
box-flex: 0;
}
.col-1 {
-webkit-box-flex: 1;
box-flex: 1;
}
.fl {
float: left;
}
.fr {
float: right;
}
js
// pages/leftSwiperDel/index.js
Page({
data: {
showModalStatus: false
},
onLoad: function(options) {
// 页面初始化 options为页面跳转所带来的参数
this.tempData();
},
// 自定义弹框
deployed: function() {
wx.navigateTo({
url: '../deploy/deploy'
// url: '../logs/logs'
})
},
//测试临时数据
tempData: function() {
var list = [{
rank: "intel酷睿5000",
txtStyle: "",
icon: "/images/details/CPU.png",
name: "CPU",
pace: "¥151",
},
{
rank: "intel酷睿5000",
txtStyle: "",
icon: "/images/details/zhuban.png",
name: "主板",
pace: "¥151",
},
{
rank: "intel酷睿5000",
txtStyle: "",
icon: "/images/details/neicun.png",
name: "内存",
pace: "¥141",
},
{
rank: "intel酷睿5000",
txtStyle: "",
icon: "/images/details/ssd.png",
name: "SSD",
pace: "¥121",
},
{
rank: "intel酷睿5000",
txtStyle: "",
icon: "/images/details/xianka.png",
name: "显卡",
pace: "¥151",
},
{
rank: "intel酷睿5000",
txtStyle: "",
icon: "/images/details/jixiang.png",
name: "机箱",
pace: "¥151",
},
{
rank: "intel酷睿5000",
txtStyle: "",
icon: "/images/details/dianyuan.png",
name: "电源",
pace: "¥11",
},
{
rank: "intel睿50",
txtStyle: "",
icon: "/images/details/xianshiqi.png",
name: "显示器",
pace: "¥151",
},
{
rank: "intel5000",
txtStyle: "",
icon: "/images/details/jianpan.png",
name: "键鼠套",
pace: "¥151",
},
]
//
this.setData({
list: list
});
},
// 弹框
powerDrawer: function(e) {
var currentStatu = e.currentTarget.dataset.statu;
this.util(currentStatu)
},
util: function(currentStatu) {
/* 动画部分 */
// 第1步：创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
});
// 第2步：这个动画实例赋给当前的动画实例
this.animation = animation;
// 第3步：执行第一组动画
animation.opacity(0).rotateX(-100).step();
// 第4步：导出动画对象赋给数据对象储存
this.setData({
animationData: animation.export()
})
// 第5步：设置定时器到指定时候后，执行第二组动画
setTimeout(function() {
// 执行第二组动画
animation.opacity(1).rotateX(0).step();
// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
this.setData({
animationData: animation
})
//关闭
if (currentStatu == "close") {
this.setData({
showModalStatus: false
});
wx.showToast({
title: '添加成功',
icon: 'succes',
duration: 1000,
mask: true
})
}
}.bind(this), 200)
// 显示
if (currentStatu == "open") {
this.setData({
showModalStatus: true
});
}
}
})
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq群聊来问我：473819131。
