微信小程序左滑動(dòng)顯示菜單功能的實(shí)現(xiàn)
更新時(shí)間:2018年06月14日 14:14:13 作者:未名胡
這篇文章主要介紹了微信小程序左滑動(dòng)顯示菜單功能的實(shí)現(xiàn),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
效果圖如下所示:
view
<view class="page"> <!--下層左側(cè)導(dǎo)航--> <view class="page-bottom"> <view class="page-content"> <view class="userinfo"> <view class="userImg"> <image src='/images/user.png'></image> </view> <view class="userText">嗨!你好,{{user.name}}</view> </view> <view bindtap="open_list" wx:for-items="{{nav_list}}" class="page-list"> <view bindtap='gotoUrl' data-id='{{item.url}}'>{{item.name}}</view> </view> </view> </view> <!--上層右側(cè)展示頁(yè)面--> <view class="page-top {{open ? 'page-state' : ''}}"> <!--上層右側(cè)展示頁(yè)面遮罩層--> <view class="page-mask {{open ? '' : 'page-mask-show'}}" bindtap="offCanvas"></view> <!--列表按鈕--> <image class="left-nav" bindtap="offCanvas" src="/images/Category.png"></image> <!--輪播代碼,可以不要--> <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <view class="sim-panel" style='margin:0px auto;width:100%;padding-top:7%'> <view style='margin-left:7%;width:100%;'> <view class="view-left" bindtap='gotoLocal' > <view class="img-view"> <image src='/images/camera.png' class="imgs"></image> </view> <view class="left-text">現(xiàn)場(chǎng)記錄</view> </view> <view class="more-view"> <view class="more" >更多...</view> </view> </view> </view> </view> </scroll-view> </view> </view>
css
view-left{ width:40%; float:left; height:150px; background-color:#33AEFD; } left-text{ text-align: center; color: #fff; } userinfo{ height:50px; } userImg{ border:1px solid #fff; height:40px; width:40px; margin:5px; border-radius: 100px; float: left; } userImg image{ height:40px; width:40px; border-radius: 100px; } userText{ color: #fff; line-height: 50px; } img-view{ height:120px; width:80%; margin:0 auto; border:1px solid #33AEFD; } imgs{ border:2px solid #fff; width:80px; height:80px; margin:20px auto; display: block; border-radius: 100px; } more-view{ width:40%; float:left; height:150px; margin-left:7%; background-color:#D1D1D1; } more{ margin:45% auto; text-align:center; color: #fff; } bottom{ bottom: 0px; position: absolute; margin: 0 auto; width:100%; height:50px; } page,.page { height: 100%; font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif; } /*左側(cè)導(dǎo)航列表 */ page-bottom{ height: 100%; width: 75%; position: fixed; background-color: rgb(0, 68, 97); z-index: 0; } page-list{ color: white; padding: 30rpx 0 30rpx 40rpx; } /*右側(cè)展示層 */ page-top{ position: relative; top: 0; left:0; width: 750rpx; height: 100%; background-color: rgb(255, 255, 255); z-index: 0; transition: All 0.4s ease; -webkit-transition: All 0.4s ease; } page-state{ transform: rotate(0deg) scale(1) translate(75%,0%); -webkit-transform: rotate(0deg) scale(1) translate(75%,0%); } imgw{width:100%;} /*右側(cè)列表按鈕 */ page-top .left-nav{ position: fixed; width: 68rpx; height: 68rpx; left: 20rpx; bottom: 20rpx; } /*右側(cè)遮罩層 */ page-mask{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 998; } page-mask-show{ display: none; }
js
var app = getApp(); var data = require('../../utils/data.js'); Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { addNumber:0, banner_url: data.bannerList(), nav_list: [{ name: "現(xiàn)場(chǎng)記錄", url:"../expo-list/expo-list" },{ name: "退出", url: "../login/login" }], user:null, open: false, indicatorDots: true,//是否顯示面板指示點(diǎn) autoplay: true,//是否開(kāi)啟自動(dòng)切換 interval: 3000,//自動(dòng)切換時(shí)間間隔 duration: 500//滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng) }, gotoUrl:function(e){ wx.navigateTo({ url: e.currentTarget.dataset.id }) }, //列表的操作函數(shù) open_list: function () { //此處進(jìn)行操作 this.setData({ open: false }); }, //左側(cè)導(dǎo)航的開(kāi)關(guān)函數(shù) offCanvas: function () { if (this.data.open) { this.setData({ open: false }); } else { this.setData({ open: true }); } }, })
源碼下載:https://download.csdn.net/download/qq_30641447/10475865
您可能感興趣的文章:
- 微信小程序MUI側(cè)滑導(dǎo)航菜單示例(Popup彈出式,左側(cè)滑動(dòng),右側(cè)不動(dòng))
- 微信小程序MUI側(cè)滑導(dǎo)航菜單示例(Popup彈出式,左側(cè)不動(dòng),右側(cè)滑動(dòng))
- 微信小程序圖片橫向左右滑動(dòng)案例
- 微信小程序左右滑動(dòng)切換頁(yè)面詳解及實(shí)例代碼
- 微信小程序側(cè)邊欄滑動(dòng)特效(左右滑動(dòng))
- 微信小程序左右滑動(dòng)的實(shí)現(xiàn)代碼
- 微信小程序 向左滑動(dòng)刪除功能的實(shí)現(xiàn)
- 微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換
- 微信小程序?qū)崿F(xiàn)左側(cè)滑動(dòng)導(dǎo)航欄
- 微信小程序?qū)崿F(xiàn)點(diǎn)餐小程序左側(cè)滑動(dòng)菜單
相關(guān)文章
JS判斷是否為JSON對(duì)象及是否存在某字段的方法(推薦)
下面小編就為大家?guī)?lái)一篇JS判斷是否為JSON對(duì)象及是否存在某字段的方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11js百度地圖滾輪縮放所在點(diǎn)偏移問(wèn)題解決
本文主要介紹了js百度地圖滾輪縮放所在點(diǎn)偏移問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02javascript表單處理具體實(shí)現(xiàn)代碼(表單、鏈接、按鈕)
這篇文章主要介紹了javascript表單處理具體實(shí)現(xiàn)代碼,包括各種表單、鏈接、按鈕控件介紹,感興趣的朋友可以參考一下2016-05-05javascript動(dòng)畫(huà)之磁性吸附效果篇
在實(shí)際應(yīng)用中,常常需要為拖拽的元素限定范圍。而通過(guò)限定范圍,再增加一些輔助的措施,就可以實(shí)現(xiàn)磁性吸附的效果。本文將詳細(xì)介紹javascript的磁性吸附,有需要的朋友可以參考借鑒。2016-12-12