缩放:wxml

<!--page/one/index.wxml-->
<view class="page">
<view class="page-bottom">
<view class="page-content">
<view class="wc">
<navigator url="../one/index" hover-class="navigator-hover">第一个菜单</navigator>
</view>
<view class="wc">
<navigator url="../two/index" hover-class="navigator-hover">第二个菜单(缩放)</navigator>
</view>
<view class="wc">
<navigator url="../three/index" hover-class="navigator-hover">第三个菜单(拖动)</navigator>
</view>
<view class="wc">
<navigator url="../four/index" hover-class="navigator-hover">第四个菜单</navigator>
</view>
</view>
</view>
<view class="page-top {{open ? 'c-state2' : ''}}">
<image bindtap="tap_ch" src="../../images/btn.png"></image>
<view class="text">第二个菜单(缩放)</view>
</view>
</view>

  js

Page({
data:{
open : false//这个数据是用来上面一层页面是覆盖在屏幕上还是在旁边
},
tap_ch: function(e){//点击的时候设置这个属性的值
if(this.data.open){
this.setData({
open : false//之前是打开的话现在设置为关闭
});
}else{
this.setData({
open : true
});
}
}
})

  wxss

page,.page {
height: 100%;
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif;
}
.page-bottom{
height: 100%;
width: 750rpx;
position: fixed;
background-color: rgb(0, 68, 97);
z-index: 0;
}
.wc{
color: white;
padding: 30rpx 0 30rpx 40rpx;
}
.page-content{
padding-top: 300rpx;
}
.page-top{
height: 100%;
position: fixed;
width: 750rpx;
background-color: rgb(57, 125, 230);
z-index: 0;
transition: All 0.4s ease;
-webkit-transition: All 0.4s ease;
}
.page-top image{
position: absolute;
width: 68rpx;
height: 38rpx;
left: 20rpx;
top: 20rpx;
}
.c-state1{//这个是平滑的
transform: rotate(0deg) scale(1) translate(75%,0%);
-webkit-transform: rotate(0deg) scale(1) translate(75%,0%);
}
.c-state2{//这个是带缩放的
transform: rotate(0deg) scale(.8) translate(75%,0%);
-webkit-transform: rotate(0deg) scale(.8) translate(75%,0%);
}
.text{
margin: auto;
margin-top: 20rpx;
margin-left: 130rpx;
vertical-align: middle;
color: white;
}

  平滑的wxml

<view class="page">
<view class="page-bottom">
<view class="page-content">
<view class="wc">
<navigator url="../one/index" hover-class="navigator-hover">第一个菜单</navigator>
</view>
<view class="wc">
<navigator url="../two/index" hover-class="navigator-hover">第二个菜单(缩放)</navigator>
</view>
<view class="wc">
<navigator url="../three/index" hover-class="navigator-hover">第三个菜单(拖动)</navigator>
</view>
<view class="wc">
<navigator url="../four/index" hover-class="navigator-hover">第四个菜单</navigator>
</view>
</view>
</view>
<view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? 'c-state1' : ''}}">
<image bindtap="tap_ch" src="../../images/btn.png"></image>
<view class="text">第三个菜单(拖动)</view>
</view>
</view>

  js

// page/one/index.js
Page({
data:{
open : false,
mark: 0,
newmark: 0,
istoright:true
},
tap_ch: function(e){
if(this.data.open){
this.setData({
open : false
});
}else{
this.setData({
open : true
});
}
},
tap_start:function(e){
// touchstart事件
this.data.mark = this.data.newmark = e.touches[0].pageX;
},
tap_drag: function(e){
// touchmove事件 /*
* 手指从左向右移动
* @newmark是指移动的最新点的x轴坐标 , @mark是指原点x轴坐标
*/
this.data.newmark = e.touches[0].pageX;
if(this.data.mark < this.data.newmark){
this.istoright = true;
}
/*
* 手指从右向左移动
* @newmark是指移动的最新点的x轴坐标 , @mark是指原点x轴坐标
*/
if(this.data.mark > this.data.newmark){
this.istoright = false; }
this.data.mark = this.data.newmark; },
tap_end: function(e){
// touchend事件
this.data.mark = 0;
this.data.newmark = 0;
if(this.istoright){
this.setData({
open : true
});
}else{
this.setData({
open : false
});
}
}
})

  

小程序仿QQ侧滑例子的更多相关文章

  1. 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  2. android开发学习 ------- 仿QQ侧滑效果的实现

    需要做一个仿QQ侧滑删除的一个效果: 一开始是毫无头绪,百度找思路,找到  https://blog.csdn.net/xiaxiazaizai01/article/details/53036994  ...

  3. 微信小程序--仿微信小程序朋友圈Pro(内容发布、点赞、评论、回复评论)

    微信小程序--仿微信小程序朋友圈Pro(内容发布.点赞.评论.回复评论) 项目开源地址M朋友圈Pro 求个Star 项目背景 ​ 基于原来的开源项目 微信小程序仿朋友圈功能开发(发布.点赞.评论等功能 ...

  4. 微信小程序仿手机相册组件——简单版

    仿手机相册的微信小程序组件,具备点击图片预览,长按图片出现多选框功能,读者可以根据自己的需求,依据现有数据进行删除等操作.话不多说,先看效果: 初始效果:  长按效果: 选择效果: 注意:当前只是简单 ...

  5. 微信小程序实现左侧滑栏

    前言 一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现. 效果 先看看效果 ...

  6. iOS仿QQ侧滑菜单、登录按钮动画、仿斗鱼直播APP、城市选择器、自动布局等源码

    iOS精选源码 QQ侧滑菜单,右滑菜单,QQ展开菜单,QQ好友分组 登录按钮 3分钟快捷创建高性能轮播图 ScrollView嵌套ScrolloView(UITableView .UICollecti ...

  7. SpringBoot实现微信小程序登录的完整例子

    目录 一.登录流程 二.后端实现 1.SpringBoot项目结构树 2.实现auth.code2Session 接口的封装 3.建立用户信息表及用户增删改查的管理 4.实现登录认证及令牌生成 三.前 ...

  8. 微信小程序 - 仿南湖微科普小程序游戏环节

    最近看到南湖微科普小程序游戏环节感觉还可以,于是模仿了下 <view class='current' animation="{{animation}}"> {{curr ...

  9. 微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装(一)

    在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时 ...

随机推荐

  1. [JSONObject/JSONArray] - 定制的JSON格式返回

    当前开发的程序中.因为抛弃了jsp的渲染,改为thymeleaf,并在比较厉害的前端进行数据json的渲染无误后,得出此json数据返回. 以往的Map<String,Object>返回j ...

  2. Dubbo和Spring Cloud微服务架构对比

    https://blog.csdn.net/zhangweiwei2020/article/details/78646252

  3. 如何恢复IIS出厂默认设置

    How to restore IIS settings and Default Web Site? http://superuser.com/questions/704850/how-to-resto ...

  4. html5中的几种布局简单比较

    html中的布局主要由静态布局.自适应布局.流式布局以及响应式布局几类,简单比较以下这几种布局的区别和特点. 一 静态布局(Static Layout) 表现:在传统web设计中,不管浏览器尺寸具体大 ...

  5. pt站 扫盲贴 面向小白

    1.什么是pt站? 大家应该知道种子,平时下电影的渠道除了百度云,就是种子了.这种普通的的种子称为bt. pt是私人种,和bt的区别是:不是谁想下就能下的,你得加入一个社区,入了伙,社区成员之间才能相 ...

  6. oracle 11 g release 2 卸载

    Win 10 系统,Oracle 11 g R 2 ,安装目录C盘根目录 1.停止Oracle的所有服务 打开“服务”窗口,关闭Oracle的所有服务 2.运行Oracle Universal Ins ...

  7. 2017 Russian Code Cup (RCC 17), Elimination Round D - Acute Triangles

    D - Acute Triangles 思路: 极角排序+点积叉积 在一个三角形中,如果它是直角或者顿角三角形,那么直角和顿角只会出现一次 所以直角和顿角三角形的个数等于直角和顿角的个数 所以锐角三角 ...

  8. [JavaScript] 给input标签传值

    body: <input type="text" style="width: 240px;" name="orgname" id=&q ...

  9. 继承ActionSupper类报错 --Struts2

    如下图所示,继承ActionSupper类报错: 原因:缺少Struts2中JAR包,具体是:

  10. android ncnn

    1.下载解压ndk wget https://dl.google.com/android/repository/android-ndk-r17b-linux-x86_64.zip unzip andr ...