关闭

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

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

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


实现的思路为:

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

关闭

小程序多余文本省略号显示

如何在 wxml 页面中截取数据?取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的。那还有 css 啊,不一样可以做到吗?但是个人觉得 css 复用性太差,暂不考虑。

微信小程序WXS之谜

微信创造了 WXS ,除了提高性能,还有什么原因?WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。

小程序如何改变onLoad 的执行时机?

也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等:

个人怎么做微信小程序

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

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

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

微信小程序常用的几个UI组件库

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

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

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

从VantComponent 谈小程序维护

在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架

如何微信小程序禁止下拉_解决小程序下拉出现空白的情况

在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?

使用CryptoJS在小程序中实现加解密

本文使用md5和rc4作为示例代码,可以根据实际项目选择不同的加密方式:在百度静态资源公共库中搜索crypto-js、用到CryptoJS的js放到同一个文件中,并在文件最下方暴露接口module.exports = CryptoJS

点击更多...

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