微信小程序?qū)崿F(xiàn)滑動(dòng)側(cè)邊欄
更新時(shí)間：2022年07月17日 16:05:01 作者：癡夢(mèng)_MM
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序滑動(dòng)側(cè)邊欄的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
手指向右滑動(dòng)可以顯示側(cè)邊欄，向左滑動(dòng)隱藏側(cè)邊欄
代碼附上：.wxml
<view class="title">
? ? ? <image ?class='headPortrait' src='../../images/1.jpg'></image> ?
? ? ? ? ? ? ?<text>趙國(guó)偉</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事件
? ? // 把手指觸摸屏幕的那一個(gè)點(diǎn)的 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;
? ?
? ? // 手指從左向右移動(dòng)
? ? if (this.data.mark < this.data.newmark) {
? ? ? ? this.istoright = true;
? ? }
? ??
? ? // 手指從右向左移動(dòng)
? ? 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;
? ? // 通過(guò)改變 opne 的值，讓主頁(yè)加上滑動(dòng)的樣式
? ? 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; ? ?/* 字體編程藍(lán)色 */
? border-left: 3px solid #3385ff; ?/* 設(shè)置邊框的寬度以及顏色 */
? }
.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;
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何利用HTML+CSS+JS模仿Windows實(shí)現(xiàn)桌面主題特效，文中的示例代碼講講詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-06-06
本文介紹了如何使用Javascript中的this關(guān)鍵字，文中代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作有一定幫助，需要的朋友可以參考下2020-05-05
這篇文章主要是對(duì)JavaScript中的傳值與傳引用進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
解決webpack dev-server不能匹配post請(qǐng)求的問(wèn)題
這篇文章主要介紹了解決webpack不能匹配post請(qǐng)求的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
如果想做一個(gè)鏈接點(diǎn)擊后不做任何事情，或者響應(yīng)點(diǎn)擊而完成其他事情一般都是設(shè)置屬性href = "#"其實(shí)還有比這更好的方法，下面為大家整理了幾種比較常見(jiàn)的解決方法，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了element-ui上傳一張圖片后隱藏上傳按鈕功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。通過(guò)本文給大家介紹Javascript的表單驗(yàn)證-提交表單，對(duì)javascript表單驗(yàn)證，提交表單相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03
這篇文章主要為大家詳細(xì)介紹了一款開(kāi)源的移動(dòng)端腳本框架Hammer.js,可以完美的實(shí)現(xiàn)在移端開(kāi)發(fā)的大多數(shù)事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript使用prototype定義對(duì)象類型(轉(zhuǎn))[
JavaScript使用prototype定義對(duì)象類型(轉(zhuǎn))[...2006-12-12
這篇文章主要介紹了JavaScript小技巧整理篇(非常全)的相關(guān)資料,需要的朋友可以參考下2016-01-01