微信小程序表单弹窗实例_wx.showToast - CSDN文库

微信小程序

3星 · 超过75%的资源 142 浏览量更新于2023-05-11 评论 1 收藏 43KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序表单弹窗实例微信小程序表单弹窗实例

主要为大家详细介绍了微信小程序表单弹窗实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

开发中有时候会碰到需要一个表单弹窗来处理数据的提交处理，然后这次发布的这套源码就是解决这个问题！

WXML代码如何：

<view class="btn" bindtap="powerDrawer" data-statu="open">button</view>

<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>

<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">

<view class="drawer_title">弹窗标题</view>

<view class="drawer_content">

<view class="top grid">

<label class="title col-0">标题</label>

<input class="input_base input_h30 col-1" name="rName" value="可自行定义内容"></input>

</view>

<view class="top grid">

<label class="title col-0">标题</label>

<input class="input_base input_h30 col-1" name="mobile" value="110"></input>

</view>

<view class="top grid">

<label class="title col-0">标题</label>

<input class="input_base input_h30 col-1" name="phone" value="拒绝伸手党"></input>

</view>

<view class="top grid">

<label class="title col-0">标题</label>

<input class="input_base input_h30 col-1" name="Email" value="仅供学习使用"></input>

</view>

<view class="top bottom grid">

<label class="title col-0">备注</label>

<input class="input_base input_h30 col-1" name="bz"></input>

</view>

</view>

<view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>

</view>

JS代码如何：

Page({

data: {

showModalStatus: false

},

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 () {

// 执行第二组动画

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论1

鹤彭

2021-12-10

你好！代码里面<view class="btn" bindtap="powerDrawer" data-statu="open">button</view> 一触碰表单，也触发了bindtap事件就关闭了，没办法填写表单呀。怎么处理？呢

weixin_38689041

粉丝: 1
资源: 963

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈