一、 jh-input-alert 中间输入弹框,可设置最大输入长度,单行多行显示 单行 <jh-input-alert title='输入框标题'placeholder='请输入'maxlength='10'bind:cancel='cancel'bind:confirm='confirm'wx:if='{{ showDialog2 }}'/> 在这里插入图片描述 多行 <jh-input-alert title='输入框标题'multiline placehold...
1.首先写组件popup popup.wxml View Code popup.wxss View Code popup.js View Code 2.然后是主页面 bottom.json View Code bottom.wxml View Code bottom.js View Code 效果图
在这里写弹出框里面的布局 4.设置点击事件,给目标view设置点击函数showModal()或者hideModal()
具体来说,弹出框的背景通过`.background_screen`类控制,而弹出框本身则通过`.attr_box`类控制。弹出框包含头部、内容区域和按钮区域。头部用于显示弹出框的标题,并提供关闭按钮;内容区域用于显示可选择的项;按钮区域用于提供操作按钮。在弹出框组件中,通过`showModal`方法实现了弹出框的显示与隐藏动画。
},//底部弹出框showModal:function() {// 背景遮罩层varanimation = wx.createAnimation({duration:50,timingFunction:"linear",delay:0})//this.animation = animationanimation.translateY(50).step()this.setData({animationData: animation.export(),showModalStatus:true})setTimeout(function() { ...
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画)。效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。 1. wxml代码 ...
前面两篇两篇文章介绍了如何在小程序中实现上下滑动效果以及如何用 Canvas 绘制一张图片,这一篇作为前两篇的延续,介绍如何从底部弹出一个对话框。 相比而言,底部弹出对话框的功能比较通用,因此非常适合定义成组件(component)。 先来看一下最终实现效果:
-- 弹出框 start --><viewclass="dialog_screen"bindtap="hideModal"wx:if="{{showModalStatus}}"></view><viewanimation="{{animationData}}"class="dialog_attr_box"wx:if="{{showModalStatus}}"><viewstyle='background:white;position: relative;overflow: hidden;'><viewclass='dialog_title'>选择...
// 显示遮罩层Page({data:{hideModal:true,//模态框的状态 true-隐藏 false-显示animationData:{},},// 显示遮罩层showModal:function(){varthat=this;that.setData({hideModal:false})varanimation=wx.createAnimation({duration:600,//动画的持续时间 默认600ms 数值越大,动画越慢 数值越小,动画越快timingFun...