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

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

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


实现的思路为:

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});
    }
  },
})


完结~~~~


优雅解决微信小程序授权登录需要button触发

聊一聊最近的一个项目,这个项目是一个收书、售书的小程序,有商城、专栏、信息发布论坛等功能。虽然不是面向所有用户,但要求无论用户是否授权都皆可使用,但同时也要求部分功能对不授权的用户限制开放。

支付宝小程序个人开发者,但暂未开放支付接口

支付宝小程序今日正式面向个人开发者开放公测。这是继微信之后,业内第2家面向个人开发者开放的小程序平台。有开发能力的个人用户可访问支付宝小程序平台,扫码验证个人身份以后即可开始支付宝小程序账号申请并进行代码开发。

小程序wxs中的时间格式化以及格式化时间和date时间互转

WXS(WeiXin Script)是小程序的一套脚本语言,wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。其中包括了很多日常使用的javascript函数,在wxs中都是不能同样使用的。

微信小程序中清除定时器

在微信小程序的开发过程中,经常会遇到使用倒计时的情况,但是小程序的页面跳转经常会遇到跳转的下一个页面后,前一个页面的倒计时还在运行。这时候需要我们在关闭或者离开当前页面的时候清除掉当前的倒计时,但是传统的方式在小程序中无法使用,在小程序中我采用的是赋值然后清除的方法。

在微信小程序中保存网络图片

在小程序的文档中我们得知,wx.saveImageToPhotosAlbum 是用来保存图片到相册的。 但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径,不支持网络图片路径,意味着我们不能直接调用这个接口。

个人怎么做微信小程序

据说移动互联网的轻量级应用是微信applet。简而言之,applet是基于微信平台的应用程序。目前,小方案的主题非常重要。它通知主要媒体和新闻,以及小程序如何打开。它也在增加,甚至个人也可以开发它

微信小程序推广方式_最有效的小程序推广模式

当小程序开发完成后,就需要进行推广操作。当然推广的前提是核心功能是否能够满足用户需求,下面总结一些具体的运作方式。和大多数APP的搜索个性一样,用户搜索小程序名称就能进入小程序界面。我们需要做好关键词优化,通过搜索-微信指数

小程序--人脸识别功能(百度ai)

接入流程:1. 按照文档获取AppID、API Key、Secret Key,进行Access Token(用户身份验证和授权的凭证)的生成,2. 选择人脸识别-->人脸检测,人脸识别接口分为V2和V3两个版本,确认在百度云后台获得的是V2还是v3版本接口权限。

百度小程序性能优化建议:分包和合理使用setData

智能小程序的视图层使用了 san 框架,相对于其他类似 react 等 mvvm 框架来通过 virtual dom diff 来实现组件的渲染来说,san 框架是基于 data 的 diff 来进行的组件重新渲染,减少了内存的使用率与计算量,保证视图更新的高效性。

微信小程序遇到的坑

微信小程序开发之路上遇到的那些坑,微信小程序开发常见之坑总结,在开发过程中碰到的问题和解决:小程序textarea组件字数限制问题 、scroll-view 中不能使用 textarea 组件 、input组件的问题、关于数据绑定的问题、关于生命周期的问题、关于picker组件

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录