滑动侧栏

.slider{
        /*background-image: linear-gradient(60deg, #96deda 0%, #50c9c3 100%);*/
        background: #333;
        width: 200px;
        height: 100%;
        position: fixed;
        right:-200px;
        display: none;
        overflow-y: scroll;
        color:#fff;
        z-index: 1005;
        padding: 0px 10px;
    }
.img_title_row{

        color: #fff;
        padding-bottom: 10px;
    }
    .img_title{
        display:flex;
        border-radius: 50%;

    }
    .img_title_img{
        margin:0 auto;
        margin-top: 20px;
        /*border-radius: 100px;*/
        width: 80px;
        height: 80px;
        /*border: 1px solid #fff;
        background: #ccc;*/
    }
    .img_title_txt{
        text-align: center;
        margin: 10px 0px;
        line-height: 25px;
    }

<div id="slider" class="slider">
            <div class="img_title">
                <img src="<{$member_info['avatar']}>" alt="" class="img_title_img">
            </div>
            <div class="img_title_txt">
                <{$member_info['uname']}><br/666
            </div>
            <ul style="padding: 10px;font-size: 16px;text-align: center;">
                <a href="#">
                    <li style="color:#fff;margin: 10px 0px;">
                        <i class="fa fa-sticky-note-o" aria-hidden="true"></i>
                        <span href="#" style="color:#fff;margin-left: 10px;" id="goods_records">发货记录</span>
                    </li>
                </a>
                <a href="#">
                    <li style="color:#fff;margin: 10px 0px;">
                        <i class="fa fa-cog" aria-hidden="true"></i>
                        <span href="#" style="color:#fff;margin-left: 10px;" id="addr_console">地址管理</span>
                    </li>
                </a>
            </ul>

        </div> 

// 滑动侧栏
    $(".allrow_goods").on("touchstart", function(e) {
            // // 判断默认行为是否可以被禁用
            // if (e.cancelable) {
      //        // 判断默认行为是否已经被禁用
      //        if (!e.defaultPrevented) {
      //            e.preventDefault();
      //            passive: false;
      //        }
      //    }
            // 获取触点坐标
            startX = e.originalEvent.changedTouches[0].pageX,
            startY = e.originalEvent.changedTouches[0].pageY;
            $(this).unbind("touchmove");

        });
    $(".allrow_goods").on("touchend", function(e) {         
            // 判断默认行为是否可以被禁用
            if (e.cancelable) {
                // 判断默认行为是否已经被禁用
                if (!e.defaultPrevented) {
                    e.preventDefault();
                }
            }               
            moveEndX = e.originalEvent.changedTouches[0].pageX,
            moveEndY = e.originalEvent.changedTouches[0].pageY,
            X = moveEndX - startX,
            Y = moveEndY - startY;
            if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
            //左滑，防止点击也出现会滑动效果所以
            if ( Math.abs(X) > Math.abs(Y) && X > 50 ) {
                $(".slider").hide(300).css("right","-200");
            }
            //右滑
            else if (Math.abs(X) > Math.abs(Y) && X < 0  ) {
                $(".slider").show(300).css("right","0");
            } else if(Y>0 || Y<0) {

            }else {
                return;
            }

        });