Android中微信小程序开发之弹出菜单

先给大家展示下效果图,具体效果图如下所示:

具体代码如下所示:

1.index.js

//index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度 //我的博客:http://blog.csdn.net/qq_31383345 //CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html }, onLoad: function () { }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 popp.call(this); this.setData({ isPopping: false }) } else { //弹出动画 takeback.call(this); this.setData({ isPopping: true }) } }, input: function () { console.log("input") }, transpond: function () { console.log("transpond") }, collect: function () { console.log("collect") } }) //弹出动画 function popp() { //plus顺时针旋转 var animationPlus = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationcollect = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationTranspond = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationInput = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) animationPlus.rotateZ(180).step(); animationcollect.translate(-100, -100).rotateZ(180).opacity(1).step(); animationTranspond.translate(-140, 0).rotateZ(180).opacity(1).step(); animationInput.translate(-100, 100).rotateZ(180).opacity(1).step(); this.setData({ animationPlus: animationPlus.export(), animationcollect: animationcollect.export(), animationTranspond: animationTranspond.export(), animationInput: animationInput.export(), }) } //收回动画 function takeback() { //plus逆时针旋转 var animationPlus = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationcollect = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationTranspond = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) var animationInput = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) animationPlus.rotateZ(0).step(); animationcollect.translate(0, 0).rotateZ(0).opacity(0).step(); animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step(); animationInput.translate(0, 0).rotateZ(0).opacity(0).step(); this.setData({ animationPlus: animationPlus.export(), animationcollect: animationcollect.export(), animationTranspond: animationTranspond.export(), animationInput: animationInput.export(), }) }

2.index.wxml

<!--index.wxml--> <image src="../../images/collect.png" animation="{{animationcollect}}" class="image-style" bindtap="collect"></image> <image src="../../images/transpond.png" animation="{{animationTranspond}}" class="image-style" bindtap="transpond"></image> <image src="../../images/input.png" animation="{{animationInput}}" class="image-style" bindtap="input"></image> <image src="../../images/plus.png" animation="{{animationPlus}}" class="image-plus-style" bindtap="plus"></image>

3.index.wxss

/**index.wxss**/ .image-style { height: 150rpx; width: 150rpx; position: absolute; bottom: 250rpx; right: 100rpx; opacity: 0; } .image-plus-style { height: 150rpx; width: 150rpx; position: absolute; bottom: 250rpx; right: 100rpx; z-index: 100; }

demo代码下载

以上所述是小编给大家介绍的Android中微信小程序开发之弹出菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-10-04 11:00:17

Android中微信小程序开发之弹出菜单的相关文章

JS中微信小程序自定义底部弹出框的教程

实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html <view class="commodity_screen"bindtap="hideModal"wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}"class="commodity_attr

微信小程序开发视频教程新鲜出炉

微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌握了小程序开发全部知识,同时还拥有一个完整作品的开发经验! 有需要的朋友关注一下ytkah的微信,留言索取微信小程序开发视频教程!

《微信小程序开发入门精要》——第1章,第1.6节开发第一个微信小程序

1.6 开发第一个微信小程序 本节将从零开始开发一款微信小程序.该程序是一个猜拳游戏,功能很简单,单击"开始"按钮后,会快速切换"锤子""剪刀"和"布",直到按"停止"按钮,会显示"锤子""剪刀"和"布"中的一个,该游戏可以实现双方或多方猜拳.本节的目的是通过该例子,将开发微信小程序的过程完整讲述一遍,从配置开发环境.建立小程序项目,一直到将微信小

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换_javascript技巧

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

使用微信小程序开发前端【快速入门】_javascript技巧

前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好

《微信小程序开发入门精要》——第1章,第1.1节什么是微信小程序

第1章 微信小程序入门微信小程序开发入门精要微信小程序是腾讯在2016年9月推出的一种新型的微信扩展.尽管目前还没有正式开发,但依然受到了非常多的关注.这主要是由于腾讯的影响力,以及微信在国内拥有的庞大的用户群体.在2017年1月9日,腾讯已经正式上线了小程序,这意味着任何人都可以在手机微信中使用小程序.由于目前小程序的数量还不多,所以现在进入小程序开发领域,可能会赶上小程序的第一拨红利.OK,废话少说,从本章开始,让我们深入了解微信小程序的原理以及详细的开发过程. 本章要点什么是微信小程序注册

微信小程序开发教程第五章:微信小程序名片夹详情页开发

前面我们发布了博卡君的微信小程序开发教程前四章,现在接着更新第五章:微信小程序名片夹详情页开发.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发)   今天加了新干货!除了开发日志本身,还回答了一些朋友的问题. 闲话不多说,先看下「名片盒」详情页的效果图:   备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息.点击微信栏.点击存入手机,地址栏需要地图展示,名片分享也是模态框指引. 首先是轮播图,autoplay 自动播放,interval 轮播

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开发,第六章:「我」的页面开发,第七章:微信小程序编辑名片页面开发) 先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作. 理清完基本流程我们开始开发.首先整个布局可以先看下,我再一步步讲. 静态布

微信小程序开发(1) 天气预报

本文介绍如何使用微信小程序开发天气预报功能.   一.项目文件列表   二.小程序配置 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBack