微信小程序实现页面左右滑动


Posted in Javascript onNovember 16, 2020

本文实例为大家分享了微信小程序实现页面左右滑动的具体代码,供大家参考,具体内容如下

效果:

微信小程序实现页面左右滑动

wxml文件

<view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} ">
  <view bindtap="tap_ch" style="{{open ? 'color: red;font-weight: bold;' : ''}}">{{open ? '手指左滑' : '手指右滑'}}</view>
  <view class='content'> 
   <text>我是内容我是内容!</text>
  </view>
</view>

js文件

data: {
open: false,
// mark 是指原点x轴坐标
mark: 0,
// newmark 是指移动的最新点的x轴坐标 
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事件
  // 把手指触摸屏幕的那一个点的 x 轴坐标赋值给 mark 和 newmark
  this.data.mark = this.data.newmark = e.touches[0].pageX;
 },
 
 tap_drag: function(e) {
  // touchmove事件
  this.data.newmark = e.touches[0].pageX;
  
  // 手指从左向右移动
  if (this.data.mark < this.data.newmark) {
   this.istoright = true;
  }
  
  // 手指从右向左移动
  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;
  // 通过改变 opne 的值,让主页加上滑动的样式
  if (this.istoright) {
   this.setData({
    open: true
   });
  } else {
   this.setData({
    open: false
   });
  }
 },

wxss文件

/* 全局样式 */
page, .page {
 height: 100%;
 font-family: 'PingFang SC',
     'Helvetica Neue',
     Helvetica,
     'Droid Sans Fallback',
     'Microsoft Yachei',
     sans-serif;
} 
/* 侧边栏样式 */
.page-slidebar {
 height: 100%;
 width: 750rpx;
 position: fixed;
 background-color:white;
 z-index: 0;
}
 
/* 控制侧边栏的内容距离顶部的距离 */
.page-content {
 padding-top: 60rpx;
}
 
/* 侧边栏内容的 css 样式 */
.wc {
 color:black;
 padding: 30rpx 0 30rpx 150rpx;
 border-bottom: 1px solid #eee; 
}
 
/* 当屏幕向左滑动,出现侧边栏的时候,主页的动画样式 */
/* scale:取值范围 0~1 ,表示屏幕大小是原来的百分之几,可以自己修改成 0.8 试下*/
/* translate(60%,0%) 表示向左滑动的时候,侧边栏占用平时的宽度为 60% */
/* translate(-60%,0%) 表示向右滑动的时候,侧边栏占用平时的宽度为 60% */
.c-state {
 transform: rotate(0deg) scale(1) translate(60%, 0%);
 -webkit-transform: rotate(0deg) scale(1) translate(60%, 0%);
}
 
/* 主页样式 */
.page-top {
 height: 100%;
 position: fixed;
 width: 750rpx;
 background-color:white;
 z-index: 0;
 transition: All 0.4s ease;
 -webkit-transition: All 0.4s ease;
}
/* 左上角图标的样式 */
.page-top image {
 position: absolute;
 width: 68rpx;
 height: 68rpx;
 left: 20rpx;
 top: 20rpx;
}
 
/* 遮盖层样式 */
.cover{
 width: 100%;
 height: 100%;
 background-color:gray;
 opacity: 0.5;
 z-index: 9000;
}
 
.content{
 margin-top: 100rpx; 
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
javascript倒计时效果实现
Nov 12 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 #Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 #Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 #Javascript
js实现纯前端压缩图片
Nov 16 #Javascript
Vue基于localStorage存储信息代码实例
Nov 16 #Javascript
微信小程序自定义底部弹出框动画
Nov 18 #Javascript
vue 封装面包屑组件教程
Nov 16 #Javascript
You might like
PHP基础知识回顾
2012/08/16 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
Angular4 ElementRef的应用
2018/02/26 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python ldap实现登录实例代码
2016/09/30 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python 修改列表中的元素方法
2018/06/26 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
绘画专业自荐信范文
2014/02/23 职场文书
人事科岗位职责范本
2014/03/02 职场文书
销售目标责任书
2014/07/23 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
初中班主任心得体会
2016/01/07 职场文书