前言
創(chuàng)新互聯(lián)從2013年成立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目做網(wǎng)站、網(wǎng)站建設(shè)網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元包河做網(wǎng)站,已為上家服務(wù),為包河各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792
一直想給項目中的小程序設(shè)置側(cè)滑欄,將退出按鈕放到側(cè)滑中,但是小程序沒有提供相應(yīng)的控件和API,因此只能自己手動實現(xiàn),網(wǎng)上很多大神造的輪子很不錯,本文就在是站在巨人的肩膀上實現(xiàn)。
hexo圖片不顯示問題,可前往簡書
效果
先看看效果,我的側(cè)滑欄需要列出如下信息:
初始狀態(tài)下,左下角設(shè)置懸空按鈕
點擊懸空按鈕,側(cè)邊欄拉出,懸空按鈕旋轉(zhuǎn)180度
主頁內(nèi)容向右滑動一定比例,并設(shè)置陰影遮罩
實現(xiàn)
首先將xml文件分為三部分,一部分是主頁內(nèi)容,一部分是側(cè)滑欄內(nèi)容,一部分是懸浮按鈕。
<!--index.wxml--> <view> <!-- 側(cè)邊滑動菜單 --> <view class="page-slidebar"> <view class="page-content"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 點擊獲取頭像昵稱 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="account-info"> <view class="account-info-item">用戶:{{YHMC}}</view> <view class="account-info-item">賬號:{{YHZH}}</view> <view class="account-info-item">角色:{{YHJS}}</view> <view class="account-info-item">版本:{{version}}</view> </view> <view> <view class='quit-view'> <button class='quit-btn' bindtap='quit'>退出登錄</button> </view> </view> </view> </view> <!-- 主頁內(nèi)容 --> <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} "> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view> <!-- 添加側(cè)拉懸浮按鈕 --> <view bindtap="openSlider"> <image class="floatbutton {{open ? 'c-button-open' : '' }}" src="../../img/floatbutton.png"></image> </view> </view>
wxss文件,樣式文件中,主要是.c-state,.c-button-open,.cover三個樣式。
/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } .account-info { margin-top: 50rpx; } .account-info-item { display: flex; align-items: center; height: 54px; margin-left: 10rpx; border-bottom: 1px solid #eee; } /* 側(cè)邊欄樣式 */ .page-slidebar { height: 100%; width: 65%; position: fixed; background-color:white; z-index: 0; } /* 主頁樣式 */ .page-top { height: 100%; position: fixed; width: 100%; background-color:white; z-index: 0; transition: All 0.4s ease; -webkit-transition: All 0.4s ease; } /* 控制側(cè)邊欄的內(nèi)容距離頂部的距離 */ .page-content { padding-top: 60rpx; } /* 當(dāng)屏幕向左滑動,出現(xiàn)側(cè)邊欄的時候,主頁的動畫樣式 */ /* scale:取值范圍 0~1 ,表示屏幕大小是原來的百分之幾,可以自己修改成 0.8 試下*/ /* translate(60%,0%) 表示向左滑動的時候,側(cè)邊欄占用平時的寬度為 60% */ .c-state { transform: rotate(0deg) scale(1) translate(65%, 0%); -webkit-transform: rotate(0deg) scale(1) translate(65%, 0%); } .floatbutton { position: fixed; width: 100rpx; height: 100rpx; bottom: 140rpx; left: 40rpx; z-index: 9999; } .c-button-open { transform: rotate(180deg) scale(1) translate(65%, 0%); -webkit-transform: rotate(180deg) scale(1) translate(65%, 0%); transition-duration:0.5s; -webkit-transition-duration: 0.5s; left: 60%; } /* 遮蓋層樣式 */ .cover{ width: 100%; height: 100%; background-color:gray; opacity: 0.5; z-index: 9000; } .quit-view { height: 5%; width: 65%; } .quit-btn { position: fixed; bottom: 5rpx; z-index: 999; color: #fff; width: 65%; border-radius: 5rpx; background-color: #064acb; }
js文件,這里不涉及我demo中申請用戶信息內(nèi)容。
// 點擊左下角小圖標(biāo)事件 openSlider: 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 }); } }
參考資料
微信小程序之側(cè)邊欄滑動實現(xiàn)(附完整源碼)
微信小程序側(cè)邊欄滑動特效(左右滑動)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站欄目:微信小程序?qū)崿F(xiàn)左側(cè)滑欄過程解析
本文網(wǎng)址:http://www.muchs.cn/article42/ghgdhc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、軟件開發(fā)、企業(yè)網(wǎng)站制作、搜索引擎優(yōu)化、虛擬主機、微信公眾號
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)