方法一: html页面: < view class = "container" class = "zn-uploadimg" > < button type = "primary" bindtap = "modalinput" > modal有输入框 < /button> </view > < modal id = "modal" hidden = &q

微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function (res) { console.log(JSON.stringify(res)) console.log(res.tapIndex) // 用户点击的按钮,从上到下的顺序,从0开始 }, fail: function (res) { co

问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: <modal class="mask" wx:if="{{hasMask}}" bindtap='hideMask'> 我是遮罩层 </modal> <view style="background-color:#ccc;height:2

在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡. 如图: 以上两张图是自己工作中遇到的,此处不要着急,一个属性帮你搞定. cursor-spacing:指定光标与键盘的距离,单位px或rpx,默认为px.取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 微信小程序开发文档api: https://developers.weixin.qq.com/miniprogram/dev/component/in

仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下. 首先善用度娘反编译弄到了源码,但是打不开.然后自己研究源码发现他们用的是movable-view实现的. 于是仿照着搭出了基础框架. 新建了个组件 wxml <!--components/playpanel/playpanel.wxml--> <movable-area style

1.消息提示     wx.showToast wx.showToast({ title: '成功', icon: 'success', duration: 2000 })2.模态弹窗 wx.showModal wx.showModal({ title: '提示', content: '这是一个模态弹窗', success (res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('

.rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert .3s; animation: showZeroAlert .3s; } @keyframes showZeroAlert { % { -webkit-transform: scale(0.5); transform: scale(0.5); } % { -webkit-transform: scale(1.05); transform

参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/details/56276180 https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html train.wxml <view class='train_con'> <view class='head'>

需要的可以下载示例:maskalert

1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { console.log('遮罩层禁止页面滑动') },

1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时查看页面效果 看小树老师的视频是要点击调试-重新载入才能看页面效果,在开发中发现直接ctrl+s键就可以在左侧查看页面效果 3:审查元素 在google浏览器一般是这个符号查看,但是在微信开发者工具中,点击后仍然无法查看dom树,正确的是点击其后边有一个的符号,这个微信小程序开发专门的调试工具,和谷

能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService. <input id="myInput" bindchange="bindChange" /> <checkbox id="myCheckbox" bindchange="bindChange" /> var inputContent = {} Page({ data: { inputConten

今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次登陆的时候,是没有绑定手环ID的,这个时候就需要弹出提示框,提示确定跳转到绑定手环id的页面,绑定成功之后,就会跳转到首页,首页显示手环的电量,手环拥有者的心率运动血压等具体的数据. js逻辑原理很简单:以下代码仅供参考 //获取应用实例 const app = getApp() Page({ da

由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal修改样式后的效果,如下图所示: index.wxml代码: <!--index.wxml--> <button class="show-btn" bindtap="showDialogBtn">弹窗</button> <!--弹窗--> &l

小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非冒泡事件,需要到组件的文档里去找,如下是我截图的一些常用的非冒泡事件 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递. 想要实时监听input的输入只要使用bindinput就可以了, wxml: <input bindinput='watchPassWord' type='password

在小程序中实现支付密码的输入,要解决几个问题: 1.小程序要想唤起键盘,必须要借助input控件.通过input控件和其属性focus来唤起和隐藏输入键盘. 2.要让input控件不可见.让光标和输入的字符都不可见,这里是把input控件定位到左边不可见范围. 先看实现后的效果图: 实现demo代码: 1.页面代码 <view catchtap='showInputLayer' class="btn_pay">立即支付</view> <!-- 密码输入框

昨天写了代码,今天发现要重用,干脆就抽出来做个组件得了,顺便还改善了一下代码通用性. 昨天的代码在这里 github下载地址 用法: 引入: var timer = require('../../plugins/wxTimer.js'); 最简单的调用方式: timer.wxTimer.call(this); 其他参数: 1.beginTime    需要倒计时的时间,比如:"01:11:12",默认值为"00:00:00" 2.fn                

如题,解决方案有两种: 1.如果弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷) <template name="popup-modal"> <view class="modal-overlay" catchtouchmove /> <view class="popup" catchtouchmove> <view class="popup-title&q

我们就拿简单常用的登录来举例子吧,先看最终效果图片

引言:金额输入时,需求如下: 1)首位不能出现0或者小数点(.) 2)仅保留两位小数 3)仅保留一个小数点(.),不允许出现多个. 1.wxml核心代码: <!-- 1.adjust-position:true 键盘弹起时,是否自动上推页面 2.bindinput="inputedit":类似双向绑定,实现实时获取输入框值 3.type='digit' 带小数点的数字键盘--> <input type='digit' class='n-input' placehold