这是项目里面一个简单的效果，小程序点击按钮弹出可填写框，摘下代码，方便之后遇到的时候可以直接拿来使用。
效果如下：
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 }); } } })
