微信小程序实战之自定义抽屉菜单（7）

2024-11-26 07:19:19

微信提供了动画api，就是下面这个

通过使用这个创建动画的api，可以做出很多特效出来

下面介绍一个抽屉菜单的案例

实现代码：
wxml：

<!--button-->
<view class="btn" bindtap="powerDrawer" data-statu="open">button</view>
<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}">
 <!--drawer content-->
 <view class="drawer_content">
 <view class="drawer_title line">菜单1</view>
 <view class="drawer_title line">菜单2</view>
 <view class="drawer_title line">菜单3</view>
 <view class="drawer_title line">菜单4</view>
 <view class="drawer_title">菜单5</view>
 </view>
</view>

wxss：

/*button*/
.btn {
 width: 80%;
 padding: 20rpx 0;
 border-radius: 10rpx;
 text-align: center;
 margin: 40rpx 10%;
 background: #0C1939;
 color: #fff;
}
/*mask*/
.drawer_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1000;
 background: #000;
 opacity: 0.2;
 overflow: hidden;
}
/*content*/
.drawer_attr_box {
 width: 100%;
 overflow: hidden;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 1001;
 background: #fff;
}
.drawer_content {
 padding: 20rpx 40rpx;
 height: 470rpx;
 overflow-y: scroll;
}
.drawer_title{
 padding:20rpx;
 font:42rpx "microsoft yahei";
 text-align: center;
}
.line{
 border-bottom: 1px solid #f8f8f8;
}

js：

Page({
 data: {
 showModalStatus: false
 },
 powerDrawer: function (e) {
 var currentStatu = e.currentTarget.dataset.statu;
 this.util(currentStatu)
 },
 util: function(currentStatu){
 /* 动画部分 */
 // 第1步：创建动画实例
 var animation = wx.createAnimation({
  duration: 200, //动画时长
  timingFunction: "linear", //线性
  delay: 0 //0则不延迟
 }); 

 // 第2步：这个动画实例赋给当前的动画实例
 this.animation = animation; 

 // 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停
 animation.translateY(240).step(); 

 // 第4步：导出动画对象赋给数据对象储存
 this.setData({
  animationData: animation.export()
 }) 

 // 第5步：设置定时器到指定时候后，执行第二组动画
 setTimeout(function () {
  // 执行第二组动画：Y轴不偏移，停
  animation.translateY(0).step()
  // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
  this.setData({
  animationData: animation
  }) 

  //关闭抽屉
  if (currentStatu == "close") {
  this.setData(
   {
   showModalStatus: false
   }
  );
  }
 }.bind(this), 200) 

 // 显示抽屉
 if (currentStatu == "open") {
  this.setData(
  {
   showModalStatus: true
  }
  );
 }
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序开发之圆形菜单仿建行圆形菜单实例

建行APP首页有个圆形菜单.仿了个玩具出来. 功能介绍: 1.一个圆形背景.六个item菜单.中间是微信用户的头像; 2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间; 上一张真机截图: 上代码: 1.index.js var app = getApp() Page({ data: { userInfo: {}, menuList: {},//菜单集合 animationData: {}, startPoint: {},//触摸开始
微信公众号菜单配置微信小程序实例详解

先提条件是你的公众号版定了小程序第一种:直接配置第二张:代码配置 1.进入在线接口调试工具 2.选择自定义菜单菜单body为json格式: { "button": [ { "type": "miniprogram", "name": "合作", "url": "http://form.mikecrm.com/2xb9aT", "a
Android中微信小程序开发之弹出菜单

先给大家展示下效果图,具体效果图如下所示: 具体代码如下所示: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度
微信小程序 action-sheet底部菜单详解

微信小程序 action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是菜单项,action-sheet-cancel顾名思义是取消隐藏菜单,我们可以通过为action-sheet-item添加bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件.可以在bindchange
微信小程序下拉菜单的实现

微信小程序下拉菜单看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto
微信小程序特效菜单抽屉效果实例代码

实现效果图: 抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示: 页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute布局,代码如下 index.wxml <view id='id-main-page' class='main-page' animation='{{animationData}}' style='left:{{mainPageLeft}}rpx;' bindtouchstart='onM
微信小程序下拉菜单简单实例

微信小程序下拉菜单简单实例 wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol
微信小程序仿美团分类菜单 swiper分类菜单

有同学要仿美团分类菜单.写了一个. 跟微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换很类似代码: js就这么一点 //index.js //获取应用实例 var app = getApp() Page({ data: { currentTab: 0, grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], swiperList:[0, 1, 2, 3, 4] }, onLoad: function () { }, click: function (e) {
微信小程序实战之自定义抽屉菜单（7）

微信提供了动画api,就是下面这个相关链接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject 通过使用这个创建动画的api,可以做出很多特效出来下面介绍一个抽屉菜单的案例实现代码: wxml:  <view class="btn" bindtap="powerDrawer" data-sta
微信小程序实战之自定义模态弹窗（8）

首先看看官方提供的模态弹窗,供大家参考,具体内容如下 api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息. 但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 wxml:  <view class="btn" bindtap="powerDrawer" data-statu="open">button</view&
微信小程序实战之自定义toast（6）

微信提供了一个toast的api wx.showToast() 相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject 本来是比较好的,方便使用,但是这个toast会显示出图标,而且不能去除. 假设:我们执行完业务的时候,toast一下,当执行成功的时候,效果还可以接受,如下图: 但是,当执行失败的时候,如下图: 失败了,你还显示个扣扣图案,那到底是成功还是失败??这肯定是不能接受的
微信小程序实战之仿android fragment可滑动底部导航栏（4）

底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一,因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏. 相关教程:微信小程序教程系列之设置标题栏和导航栏(7) 但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动. 在业务上,有时候会比较限制,并不能完全满足所需. 又例如早前有人拿着UI稿问我,这种广告轮播图的样式,在小程序能不能实现呢? 我当时没有想了下,还不是很确定,因为小程序的轮播图的那几个小点点实在比较普通,样式单一. 因
微信小程序实现的自定义分享功能示例

本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮用户点击分享按钮的时候会调用此事件需要 return 一个 Object,用于自定义分享内容示例代码: Page({ onShareAppMessag
微信小程序官方动态自定义底部tabBar的例子

最近在做小程序的项目,由于用户需求在进入页面时进行选则角色,然后再进入小程序,这时看到的底部菜单看到的不一样,而我们都知道原生的tabBar是不支持这种做法的.在网上搜集了海量资料后发现无非两种解决方法:1.是建立模板,可是会有不能忍受的抖动:2.是利用小程序的组件开发:但是项目已经进行了一般,不可能再进行大的改变: 怎么办呢?? 无意在一条评论中发现说微信官方已经提供该组件,于是在小程序文档中寻找很久才在一个犄角旮旯找到:地址链接. 先看效果图: 1.首先看一下官方用法这是几个非常重要你需要
微信小程序实战程序简易新闻的制作

微信小程序实战项目: 简易新闻制作先看下效果: 实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的个人开发者,无法认证:toolbar四个现象:新闻,笑话,历史上的今天和主页,集中主页采用的是默认的页面,添加自己的一些内容:数据绑定,列表渲染,条件渲染和事件的使用:使用一些基础的View和text,部分API的使用: 代码结构目录用途 images 存放本地图片 pages 存放页面,history历史上的今天,index主页,joke笑话,news新闻 utils 工具包
微信小程序 action-sheet 反馈上拉菜单简单实例

微信小程序 action-sheet 反馈上拉菜单简单实例看下实现效果图: js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({ actionSheetHidden: !this.data.acti
微信小程序系列之自定义顶部导航功能

具备基础 vue框架:vue官方文档 mpvue框架:mpvue官方文档全局配置 •找到全局的app.json文件,在配置中添加如下内容: "navigationStyle": "custom" "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", &q

微信小程序实战之自定义抽屉菜单（7）

相关推荐

随机推荐