|
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頁面左右滑動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下 本文實例為大家分享了微信小程序?qū)崿F(xiàn)頁面左右滑動的具體代碼，供大家參考，具體內(nèi)容如下 效果：
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>我是內(nèi)容我是內(nèi)容！</text> </view></view> js文件 data: {open: false,// mark 是指原點x軸坐標(biāo)mark: 0,// newmark 是指移動的最新點的x軸坐標(biāo) newmark: 0,istoright: true }, // 點擊左上角小圖標(biāo)事件 tap_ch: function(e) { if (this.data.open) { this.setData({ open: false }); } else { this.setData({ open: true }); } }, tap_start: function(e) { // touchstart事件 // 把手指觸摸屏幕的那一個點的 x 軸坐標(biāo)賦值給 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;} /* 側(cè)邊欄樣式 */.page-slidebar { height: 100%; width: 750rpx; position: fixed; background-color:white; z-index: 0;} /* 控制側(cè)邊欄的內(nèi)容距離頂部的距離 */.page-content { padding-top: 60rpx;} /* 側(cè)邊欄內(nèi)容的 css 樣式 */.wc { color:black; padding: 30rpx 0 30rpx 150rpx; border-bottom: 1px solid #eee; } /* 當(dāng)屏幕向左滑動，出現(xiàn)側(cè)邊欄的時候，主頁的動畫樣式 *//* scale：取值范圍 0~1 ，表示屏幕大小是原來的百分之幾，可以自己修改成 0.8 試下*//* translate(60%,0%) 表示向左滑動的時候，側(cè)邊欄占用平時的寬度為 60% *//* translate(-60%,0%) 表示向右滑動的時候，側(cè)邊欄占用平時的寬度為 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;}/* 左上角圖標(biāo)的樣式 */.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; } 為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。 |
|
|
