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

这篇文章主要为大家详细介绍了微信小程序实现页面左右滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。