微信小程序實現(xiàn)滑動側邊欄

更新時間：2022年07月17日 16:05:01 作者：癡夢_MM

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)滑動側邊欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序滑動側邊欄的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

手指向右滑動可以顯示側邊欄，向左滑動隱藏側邊欄

代碼附上：.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>發(fā)件箱
? ? ? ? ? ? </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;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: