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

效果：

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;} .wc { color:black; padding: 30rpx 0 30rpx 150rpx; border-bottom: 1px solid #eee; } .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; }

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

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