小程序仿QQ侧滑例子
缩放: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.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...
- android开发学习 ------- 仿QQ侧滑效果的实现
需要做一个仿QQ侧滑删除的一个效果: 一开始是毫无头绪,百度找思路,找到 https://blog.csdn.net/xiaxiazaizai01/article/details/53036994 ...
- 微信小程序--仿微信小程序朋友圈Pro(内容发布、点赞、评论、回复评论)
微信小程序--仿微信小程序朋友圈Pro(内容发布.点赞.评论.回复评论) 项目开源地址M朋友圈Pro 求个Star 项目背景 基于原来的开源项目 微信小程序仿朋友圈功能开发(发布.点赞.评论等功能 ...
- 微信小程序仿手机相册组件——简单版
仿手机相册的微信小程序组件,具备点击图片预览,长按图片出现多选框功能,读者可以根据自己的需求,依据现有数据进行删除等操作.话不多说,先看效果: 初始效果: 长按效果: 选择效果: 注意:当前只是简单 ...
- 微信小程序实现左侧滑栏
前言 一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现. 效果 先看看效果 ...
- iOS仿QQ侧滑菜单、登录按钮动画、仿斗鱼直播APP、城市选择器、自动布局等源码
iOS精选源码 QQ侧滑菜单,右滑菜单,QQ展开菜单,QQ好友分组 登录按钮 3分钟快捷创建高性能轮播图 ScrollView嵌套ScrolloView(UITableView .UICollecti ...
- SpringBoot实现微信小程序登录的完整例子
目录 一.登录流程 二.后端实现 1.SpringBoot项目结构树 2.实现auth.code2Session 接口的封装 3.建立用户信息表及用户增删改查的管理 4.实现登录认证及令牌生成 三.前 ...
- 微信小程序 - 仿南湖微科普小程序游戏环节
最近看到南湖微科普小程序游戏环节感觉还可以,于是模仿了下 <view class='current' animation="{{animation}}"> {{curr ...
- 微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装(一)
在做web开发时,表单验证插件我们前端用的是jqueryValidate,由于个人主要精力是在后台JAVA开发上,为了让插件与后台更好的结合和使用,通过JAVA的自定义组件将表单全部重新写了一边,同时 ...
随机推荐
- [JSONObject/JSONArray] - 定制的JSON格式返回
当前开发的程序中.因为抛弃了jsp的渲染,改为thymeleaf,并在比较厉害的前端进行数据json的渲染无误后,得出此json数据返回. 以往的Map<String,Object>返回j ...
- Dubbo和Spring Cloud微服务架构对比
https://blog.csdn.net/zhangweiwei2020/article/details/78646252
- 如何恢复IIS出厂默认设置
How to restore IIS settings and Default Web Site? http://superuser.com/questions/704850/how-to-resto ...
- html5中的几种布局简单比较
html中的布局主要由静态布局.自适应布局.流式布局以及响应式布局几类,简单比较以下这几种布局的区别和特点. 一 静态布局(Static Layout) 表现:在传统web设计中,不管浏览器尺寸具体大 ...
- pt站 扫盲贴 面向小白
1.什么是pt站? 大家应该知道种子,平时下电影的渠道除了百度云,就是种子了.这种普通的的种子称为bt. pt是私人种,和bt的区别是:不是谁想下就能下的,你得加入一个社区,入了伙,社区成员之间才能相 ...
- oracle 11 g release 2 卸载
Win 10 系统,Oracle 11 g R 2 ,安装目录C盘根目录 1.停止Oracle的所有服务 打开“服务”窗口,关闭Oracle的所有服务 2.运行Oracle Universal Ins ...
- 2017 Russian Code Cup (RCC 17), Elimination Round D - Acute Triangles
D - Acute Triangles 思路: 极角排序+点积叉积 在一个三角形中,如果它是直角或者顿角三角形,那么直角和顿角只会出现一次 所以直角和顿角三角形的个数等于直角和顿角的个数 所以锐角三角 ...
- [JavaScript] 给input标签传值
body: <input type="text" style="width: 240px;" name="orgname" id=&q ...
- 继承ActionSupper类报错 --Struts2
如下图所示,继承ActionSupper类报错: 原因:缺少Struts2中JAR包,具体是:
- android ncnn
1.下载解压ndk wget https://dl.google.com/android/repository/android-ndk-r17b-linux-x86_64.zip unzip andr ...