微信小程序实现右侧菜单的功能效果

时间: 2018-06-15阅读: 6420标签: 小程序

这篇文章主要讲解微信小程序如何实现 侧边栏滑动功能。


实现的思路为:

1、wxml页面结构分为2层:侧边栏菜单、正文部分。

2、正文部分监听touchstart、touchmove、touchend触摸事件。用于判断是否左右滑动,来显示右侧菜单。

3、需要给侧边栏添加移动动画样式。


实现代码如下:

wxml:

<view class="page">
  <view class="side"><!--侧滑菜单-->
        <text>内容</text>
  </view>
  <view bindtouchmove="tap_move" bindtouchend="tap_end" bindtouchstart="tap_start" class="content {{side.newopen?'state':''}}">
      <image bindtap="tap_click" src="../../images/ic_column.png"></image>
  </view>
</view>


wxss:

.side{
  height: 100%;
  width: 750rpx;
  position: fixed; 
  background: #C1C1C1;
}
.content{
  height: 100%;
  width: 750rpx;
  position: fixed;
  background:#2B9BEB;
  transition: All 0.5s ease;
  -webkit-transition: All 0.5s ease;
}
.state{
  transform: rotate(0deg) scale(1) translate(70%,0%); 
  -webkit-transform: rotate(0deg) scale(1) translate(70%,0%); 
}


js:

Page({
  data: {
    side: {//滑动操作
      pageX: 0,
      newpageX: 0,
      open: false,
      newopen: false,//判断侧边栏是否打开-显示
    },
  },
  tap_click:function(){//点击菜单
    this.data.side.open =!this.data.side.open;
    this.setData({'side.newopen':this.data.side.open});
  },
  tap_start: function(e){//touchstart事件
    this.data.side.pageX = this.data.side.newpageX = e.touches[0].pageX;
  },
  tap_move: function(e){//touchmove事件
    this.data.side.newpageX = e.touches[0].pageX;
  },
  tap_end: function(){//touchend事件
    if(this.data.side.pageX != this.data.side.newpageX){
      this.data.side.open = this.data.side.pageX < this.data.side.newpageX ? true : false;
      this.setData({'side.newopen': this.data.side.open});
    }
  },
})


完结~~~~


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/884

关闭

小程序横屏方案对比

随着小程序api开放的功能日渐增多,小程序可以做到的功能和展现形式也越来越多,其中横屏的展现形式就是其中的一种,而实现横屏的方案也有多种,但是每种方案都有一定的缺陷,恰巧最近也在横屏方案上踩了不少坑

微信小程序视图层处理增强之WXS

WXS算是专供WXML调用的有独立作用域的JS模块(不是全功能的JS,感觉有所限制)。举个例子,在这之前,我们是没有办法在WXML的数据绑定括号{{}}中调用JS函数的,所以在WXML层面就缺少了进一步做数据处理的能力。

小程序开发实践总结

从微信发布小程序以来,各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。前前后后也开发了四五个小程序了。总觉得要留下点什么,既是记录那些年我们踩过的坑,也是希望大家别再掉坑。

Mpx 小程序框架技术揭秘

与目前业内的几个小程序框架相比较而言,mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说,是没有任何“包袱”,围绕着原生小程序这个 core 去做不同功能的 patch 工作

个人小程序应用开发指南

小程序依附于各大平台,支付宝、微信、头条、百度等小程序,都是在平台上进行开发,平台提供对应的技术支持和用户环境。对于个人开发者,这个还是蛮方便的,它本身带有流量属性,易于传播。

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

微信小程序-自动定位并将经纬度解析为具体地址

微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)

小程序之生成朋友圈图片

微信的小程序是没有分享到朋友圈的功能的。小程序目前只能分享到群里或者发给好友。但是业务需要方便推广,需要分享到朋友圈。得出了以下思路:利用小程序canvas绘制图片,将背景图和二维码绘制成一张图片。

小程序图片加载失败使用默认图片

小程序的image标签有几个常用的属性,lazy-load(懒加载,默认为fasle,不过和本文无关),bindload(当图片加载完成的时候触发的事件),另一个就是我们本文的主角binderror(当发生错误的时候触发的事件);

微信小程序版本自动更新

当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!