微信小程序實現滑動側邊欄
本文實例為大傢分享瞭微信小程序滑動側邊欄的具體代碼,供大傢參考,具體內容如下
效果圖:
手指向右滑動可以顯示側邊欄,向左滑動隱藏側邊欄
代碼附上:.wxml
<view class="title"> <image class='headPortrait' src='../../images/1.jpg'></image> <text>趙國偉</text> </view> <view class="nav_left_items {{click == 1 ? 'active' : ''}}" bindtap="switchRightTab" data-id="1" > <image class='icon' src='../../images/get.png'></image> <view>收件箱 </view> </view> <view class="nav_left_items {{click == 2 ? 'active' : ''}}" bindtap="switchRightTab" data-id="2"> <image class='icon' src='../../images/send.png'></image> <view>發件箱 </view> </view> <view class="nav_left_items {{click == 3 ? 'active' : ''}}" bindtap="switchRightTab" data-id="3"> <image class='icon' src='../../images/write.jpg'></image> <view >寫信件 </view> </view> </scroll-view>
.js文件
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文件
.nav_left{ width:25%; height:100%; background:#F2F2F2; text-align:center; position:absolute; top:0; left:0; } .nav_left .nav_left_items{ display: flex; height:40px; line-height:40px; font-size:28rpx; } .nav_left .nav_left_items.active{ display: flex; background: #fff; /* 背景色變成白色 */ color: #3385ff; /* 字體編程藍色 */ border-left: 3px solid #3385ff; /* 設置邊框的寬度以及顏色 */ } .title{ margin-top: 10px; } .icon{ display: flex; justify-content: center; align-items: center; width:20px; height: 20px; margin: 0px 3px; border-radius: 5px ; margin-top:10px ; } .headPortrait{ width:28px; height: 28px; border-radius: 20px; } .page-slidebar { height: 100%; width: 750rpx; position: fixed; background-color:white; z-index: 0; }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。