今天给大家带来一个微信小程序的弹出是菜单效果，老规矩先上效果图。(录制的gif动画有点卡，实际真机或是模拟器上很顺畅)先简单说下思路： 1、首先在屏幕的某个位置放几个悬浮按钮，放几个看你需要的功能 2、点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩，这个遮罩在我前面自定义modal弹框时有用到 3、分别对按钮做旋转和移动动画和透明度，造成动画差异就是位移的动画距离不同 4、收起的时候回到原来位置并且让透...
本文实例讲述了微信小程序MUI侧滑导航菜单。分享给大家供大家参考，具体如下： 实现的目标—-YDUI的Popup组件点击列表图标—-左侧的菜单栏显示—-点击关闭按钮或者右侧的遮罩层—-左侧菜单栏关闭实现方案1：左侧菜单和右侧展示页面分为上下两层wxml <view class="page"><----下层左侧导航---><view class="page-bottom"><view class="page-content"><view bindtap="open_list" wx:for-items="{{nav_list}}" class="page-list"><tex...
本文实例讲述了微信小程序MUI侧滑导航菜单。分享给大家供大家参考，具体如下： 实现的目标MUI的off canvas效果点击列表 —- 右侧展示页面不动，左侧导航滑动 —- 点击右侧遮罩层或者左侧选项 —- 左侧还原，右侧去掉遮罩层实现方案2：左右分上下两层，左侧滑动，右侧不动 WXML <view class="page"><view class="page-top {{open ? page-top-show : }}"><view class="nav-list" wx:for-items="{{nav_list}}" bindtap="open_list" ...
本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能。分享给大家供大家参考，具体如下： index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange"><block wx:for-items="{{actionSheetItems}}"><action-sheet-item bindtap="bind{{item.bindtap}}">{{item.txt}}</action-sheet-item></block><action-...
本文为大家分享了微信小程序实现图片旋转、下拉列表的具体代码，供大家参考，具体内容如下 正文：先上效果图：index.wxml <view class="phone_one" bindtap="clickPerson"><view class="phone_personal">{{firstPerson}}</view><image src="../../image/v6.png" class="personal_image {{selectArea ? rotateRight :}}"></image> //三目法判断图片要不要旋转180。</view><view class="person_box"><view class="phone_select" hidd...
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下：父页面获取子页面元素格式：$("#iframeID").contents().find("#eleID")示例代码：father.html<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>父级页面</title><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><style>.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;backgro...
本文实例为大家分享了微信小程序实现弹出层效果的具体代码，供大家参考，具体内容如下先看下效果图吧 其实这个效果实现起来很简单，就是通过三目运算符来控制遮罩层的显示和隐藏 贴代码了： 规则按钮： <text class=rule bindtap=showRule>规则</text>遮罩层：我这个数据是从后台拿来动态渲染到页面的 <!-- 规则提示 --><view class="ruleZhezhao {{isRuleTrue?isRuleShow:isRuleHide}}"><view class=ruleZhezhaoContent><view cla...
view class="container" class="zn-uploadimg"> <button type="primary"bindtap="showok">消息提示框</button> <button type="primary"bindtap="modalcnt">模态弹窗</button> <button type="primary"bindtap="actioncnt">操作菜单</button></view>1.消息提示——wx.showToast(OBJECT)//show.js //获取应用实例 var app = getApp() Page({showok:function() {wx.showToast({title: 成功,icon: success,duration: 2000})} }) ...
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码上，开始这次的vue尝试吧。 【遇到的问题】 在一个可滑动列表页弹出一个全屏蒙层，蒙层固定，中间一块显示消息框，当用手滑动蒙层空白处时，滑动事件会穿透到底部列表页，导致列表页的滑动。 【要实现的目标】 1. 滑动蒙层空白处不让滑动事件穿透。 2. 当蒙层消息框文字多时，要让文字可上下滑动...
在vue项目中，选择性别是用的一个弹出层， <div class="sex" v-show="showed" transition=fade @click="unshow"><ul @click.stop="stophidden"><li class="choice">选择</li><li><label>男</label><input type="radio" name="sex" value="男"></li><li><label>女</label><input type="radio" name="sex" value="女"></li></ul></div>已经给这个.sex层绑定了一个v-show条件，实现了点击显示隐藏的效果 但是因为这个效果是加在父级上...
如下所示： comm.loadjs("js/mui.picker.min.js","js/mui.poppicker.js")因为是点击才弹出的，所以就不用在index.html里面写<script src=""></script>这样的方式来引入js了。因为index.html这个页面是每个组件即.vue都会引用的，所以你如果在这里面引入太多js肯定会影响网页的加载速度的。 对于页面加载以后需要引入的js你可以使用上面的方式引入。注意这个comm是comm.js里面有个load它是封装好的一个方法。 它里面有 loadjs(...pa...
言归正传 我们老样子直接先上效果图再开始今天的分享 这个项目的github可以看一看组件分析 界面组成逻辑分析最终实现界面组成 从上图中，我们可以看出界面主要分为menu和item2块，其中menu的动画是自传，item的动画是位移，然后这里我们通过绝对布局的方式将整个控件定位在四个角落 .menu_container {position: absolute;z-index: 100;border-radius: 50%;transition-duration: 400ms;text-align: center;border: #efefef 3px soli...
IOS不自动弹出键盘，必须手动触发一下focus才行，不能自动调用，所以需要诱导用户点击某个按钮触发focus，最终修改的方法，默认隐藏密码输入框，隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内，并且调用focus的方法代码如下，有问题欢迎评论 <template><div class="pwdpush-box"><h4 class="enter-password" @click="enterPwd">输入密码</h4><div class="phonenum-show" :class="pu...
1.遇到问题： 需要做一个点击input弹出带搜索的键盘。 解决： input的type="search",可弹出带搜索的键盘。并监听搜索按钮，请求数据 <input @keyup.13="show()" type="search">2.但是又遇到一个新的问题： 点击搜索之后键盘没有收回。 解决： 通过$refs获取input 监听搜索按钮，添加.blur() <input @keyup.13=show() type="search" ref="input1"> show(){this.$refs.input1.blur(); }3.测试时发现ios无法弹出带搜索的键盘 解决： 给...
在用vue-cli脚手架搭建手机H5页面应用的时候，其中一页中部有input，底部有position：absolute；bottom：0的元素， 当点击input框时在安卓手机上出现了： 1 虚拟键盘弹出盖住input 2 底部定位的元素被挤上来 网络上很多关于body设定宽高以及scrolltop的方法都不管用，因为这里是路由页面，根据网上的思路，吊起输入键盘的时候页面的高度是变化的，监听window.onresize，判断是否吊起键盘，然后设定底部模块的隐藏和显示，整个块元素...