小程序点击侧滑导航栏

侧滑组件代码：

<view class='dpfC {{slideNav ? "selectItems-content-show":"selectItems-content-hide"}}' catchtouchmove='ture'>
    <view class="userInfo" wx:if='{{slideNav}}'>
        <view class="userPic marginTop">
            <!-- <image src='../../images/user_icon.png'></image> -->
        </view>
        <view class="marginTop">185*****112</view>
        <view class="marginTop fontSize-26">白金会员</view>
        <navigator hover-class='none' wx:for='{{list}}' wx:key='key' url='{{item.path}}'>
            <view class="mayCenterList dpf padding20 {{index == 0 ? 'marginTop':''}}">
                <image class="listicon marginRight" src='{{item.icon}}'></image>
                <view>{{item.name}}</view>
            </view>
        </navigator>
    </view>
    <view wx:if='{{slideNav}}' class="bottomContent dpfC">
        <view class="recommend dpf">
            <view class="dpfC">
               <image src='../../images/user_icon.png'></image>
                推荐有奖
            </view>
           <view class="dpfC">
               <image src='../../images/user_icon.png'></image>
                推荐有奖
            </view>
         <view class="dpfC">
               <image src='../../images/user_icon.png'></image>
                推荐有奖
            </view>
        </view>
        <view class="clause">
            法律条款与平台规则 <image src="../../images/right2_icon.png"></image>
        </view>
    </view>
</view>

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        slideNav: { //导航 
            type: Boolean,
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        slideNav: false,
    },

    /**
     * 组件的方法列表
     */
    methods: {
        //关闭
        hideslideNav() {
            let that = this;
            that.setData({
                slideNav: !that.data.slideNav,
            })
            that.triggerEvent("hideslideNav", data);
        },
        //显示
        showslideNav() {
            let that = this;
            that.setData({
                slideNav: true,
            })
            that.triggerEvent("showslideNav", data);
        },
    }
})

 

.selectItems-content-hide{
    width: 500rpx;
    height: 100vh;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: -500rpx;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: myfirst2 0.5s;
}
.selectItems-content-show{
    width: 500rpx;
    height: 100vh;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: myfirst 0.5s;
}
@keyframes myfirst {
    0% {
        background: #ffffff;
        left: -500rpx;
    }

    100% {
         background: #ffffff;
        left: 0;
    }
}
@keyframes myfirst2 {
    0% {
        background: #ffffff;
        left: 0;
    }

    100% {
         background: #ffffff;
        left: -500rpx;
    }
}

 调用组件页面代码

<view class="container">
    <!-- 头部 -->
    <view class="headerBox width100 dpfC padding20">
        <view class="headerBox width90 dpfb">
            <view class="user_nav" bindtap="onshowslideNav">  //点击开始滑动
                <image src="../../images/user_icon.png"></image>
            </view>
            <view class="addres">
                <text class="fontSize-30 color2 marginRight10">北京市</text>
                <image class="donw_icon" src='../../images/donw_icon.png'></image>
            </view>
            <view class="dpf">
                <view class="mssage_icon_box">
                    <image src="../../images/mssage_icon.png"></image>
                </view>
                <view class="scan_box">
                    <image src="../../images/scan_icon.png"></image>
                </view>
            </view>
        </view>
    </view>
</view>
<!-- 侧滑个人中心 -->
<!-- 点击遮罩隐藏 -->
<view class='shade_1' wx:if='{{slideNav}}' catchtap='onhideslideNav' catchtouchmove='ture'></view>
<slideNav id='slideNav' slideNav='{{slideNav}}' bind:showslideNav='onshowslideNav' bind:hideslideNav='onhideslideNav'></slideNav>

const App = getApp()
Page({
    data: {
        slideNav: false, //遮罩
    },
    onshowslideNav() {
        this.setData({
            slideNav: true,
        })
    },
    onhideslideNav() {
        this.setData({
            slideNav: false,
            isShadeShow: false
        })
    },


})

 

喜欢上方小程序,需要源码的,私信小编留下邮箱。