本文实例为大家分享了微信小程序实现页面左右滑动的具体代码,供大家参考,具体内容如下
效果:
wxml文件
<view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open "> <view bindtap="tap_ch" style="{{open ">{{open "htmlcode">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; }为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“微信小程序实现页面左右滑动”评论...
更新动态
20240626
20240626
- 瑞鸣音乐《中国音乐地图之听见河南豫剧经典唱段》2020[WAV分轨]
- 【伊比萨沙发】VA-2024-IbizaSpring2024(LoungeCocktailsfromtheHeart)[FLAC]
- 群星《世界顶级汽车音响试音王》4K金碟16CD[WAV+CUE]
- 群星-音效环绕天碟《极致环绕人声天碟天品》7CD[WAV]
- 泰拉克SACD古典试音碟7SACD-ISO
- 群星《红歌宝典》20CD[WAV/分轨]
- 《101系列:好歌101首 细听年代精选》[WAV+CUE][3.6GB]
- 《101系列 6CD 国语经典101首歌曲 张学友 王菲代表作》[APE+CUE][2.8GB]
- 《101系列:国语经典101 VOL2 6CD 精选最经典101首》[WAV+CUE][2.3GB]
- 群星《十年网络红歌》15CD[WAV分轨]
- 宝丽金-环球10周年至50周年经典金曲15CD[低速原抓WAV+CUE]
- FIM唱片《十大男伶》[低速原抓WAV+CUE]
- 《101系列:情歌101 6CD》[WAV+CUE][3.1GB]
- 庄心妍《降调版合集》[320K/MP3][52.96MB]
- 庄心妍《降调版合集》[FLAC/分轨][118.78MB]