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

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

wx.showModal wx.showModal({ title: '删除图片', content: '确定要删除该图片?', showCancel: true,//是否显示取消按钮 cancelText:"否",//默认是“取消” cancelColor:'skyblue',//取消文字的颜色 confirmText:"是",//默认是“确定” confirmColor: 'skyblue',//确定文字的颜色 success: function (res) {

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

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

if (!logined) { wx.showModal({ title: '提示', content: '您还没登录登录车掌柜, 是否前往登录', confirmText: '前往登录', confirmColor: '#F87A54', success (res) { if (res.confirm) { that.goToLogin() } } }) return } wx.navigateTo({ url: '../resourceOrder/resourceOrder' })

微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 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

wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss中的样式为全局样式,作用于每一个页面.在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器. app.js文件代码: App({ onLaunch: function () { console.log('小程序已启动') }, onShow: f

百度小程序与微信小程序相似度90%.微信小程序转换为百度小程序,部分还是需要人工修改! 做了一个form留言表单,点击提交之后,input框第一次会清空,但是第二次就不会清空了! 不多说直接上代码! .swan文件 <view class="page"> <form bindreset="formReset"> <view class="weui-cells__title">基本信息</view>

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

提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: }) wx.hideToast() 隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: }) setTimeout(function(){ wx.hideToast() },) wx.showModal(OBJ

最近在写小程序,项目要求写一个搜索框,在进入页面时就触发input的事件,调出键盘,点小键上的搜索按钮 就触发搜索事件,分享一下. bindconfirm 是点击小键盘上的搜索按钮就触发要执行的方法 例如: searchBtn : function(){ alert("你点击了键盘搜索键") }focus 进入这个搜索页面后自动获取焦点,也就是进来后自动调出微信键盘光标不停的在搜索框里闪啊闪的. 类型是 Boolean --------------------- 作者:BIG_LEE_

最近遇到一个需求.公司有一个业务,制作的小程序需要跳出微信打开一个指定的我们自己的页面,拿到这个需求后我们团队分开去找资料研究方案,通过微信的开发文档.腾讯的第三方开发文档我们都查阅过资料但是最终只找到一些历史性的资料也就是以前可以现在已经全部封闭了,在网络上找到 很早之前一些前辈分享的遮挡.我们加以改进. 现在可以实现安卓手机的话是通过点击链接,直接跳转出微信.自动打开手机默认的浏览器 案例地址:http://demo.liuy88.cn/wxjum_xf0108013.html

在微信小程序里的搜索框,按软键盘回车键触发搜索事件. <input type="text"  placeholder="搜索" value="{{inputVal}}"  bindinput="inputTyping" bindconfirm="search" /> bindconfirm  即为回车事件,为它绑定上需要触发的事件.search是对应的搜索方法.

介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放template相关的文件.注意这里只是单独的创建各个文件,并不是创建Page或者Component. 创建好之后的文件目录如图: 这里演示一个用template当列表的item,然后可以点击并获取到值. 然后开始写templates.wxml文件,这里面可以有多个template代码块,如代码所示:

在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat

仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下. 首先善用度娘反编译弄到了源码,但是打不开.然后自己研究源码发现他们用的是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('

一. 前言 小程序官方文档,上面说明 wx.getUserInfo(OBJECT) 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作. 当用户未授权过,调用该接口将直接报错 当用户授权过,可以使用该接口获取用户信息 如上文,之前用户未授权过时,调用wx.getUserInfo会调出授权框:但现在在用户未授权过时调用该接口,会直接走fail方法.