写一个小程序可移动导航组件

1.创建文件夹及文件
　　

2.编写index.js

/**
 * 导航组件
 */
Component({
    /**
     * 组件的data
     */
    data: {
        top:456,//初始显示坐标 单位px
        left:317,
        showNav:false //显示导航
    },
    /**
     * 组件的方法列表
     */
    methods: {
        move(e) {//移动时触发的方法
            let that = this;
            that.setData({
                top: e.changedTouches[0].pageY,//重置坐标
                left: e.changedTouches[0].pageX
            })
        },
        navigation(e){//显示或隐藏导航菜单
            this.setData({
                showNav: !this.data.showNav
            })
        },
        goHome(){
            wx.switchTab({//菜单功能 回首页
                url: '/pages/shop/index/index'
            })
        },
        goExit(){
            wx.redirectTo({//菜单功能 退出
                url: "/pages/login/login",
            })
        }
    }
})

3.编写index.json

{
    "component": true
}

4.编写index.wxml

<!-- 组件模板 -->
<wxs module='calc'>
var calc = function(top,px){
    if(top>200){
        return top-px
    }else{
        return top+px
    }
}
module.exports.calc = calc;
</wxs>
<view>
    <view class='shade' wx:if="{{showNav}}">
    </view>
    <view wx:if="{{showNav}}">
        <view catchtap='goHome' class='navigation home' style='top:{{calc.calc(top,150)}}px;left:{{left}}px;'>
            <view class='icon_container'>
                <icon class='iconfont icon-shop'></icon>
                <text>首页</text>
            </view>
        </view>
        <view catchtap='goExit' class='navigation exit' style='top:{{calc.calc(top,80)}}px;left:{{left}}px;'>
            <view class='icon_container'>
                <icon class='iconfont icon-exit'></icon>
                <text>退出</text>
            </view>
        </view>
        <view catchtap='navigation' class='navigation close' style='top:{{top}}px;left:{{left}}px;'>
            <icon class='iconfont icon-close'></icon>
        </view>
    </view>
    <movable-view wx:if="{{!showNav}}" class='navigation' catchtap='navigation' catchtouchmove='move' style='top:{{top}}px;left:{{left}}px;'>
        <text>导航</text>
    </movable-view>
</view>

5.编写index.wxss （这儿引用了本地iconfont）

@import "/lib/style/iconfont.wxss";
.navigation {
    position: fixed;
    bottom: 150rpx;
    right: 50rpx;
    width: 80rpx;
    height: 80rpx;
    border: 1px solid #fff;
    background: #e5a600;
    border-radius: 50%;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    z-index: 999;
}
.navigation>text{
    line-height: 80rpx;
    color: #fff;
    font-size: 12px;
}

.navigation.exit {
    bottom: 320rpx;
    background: #fff;
}

.navigation.home {
    bottom: 470rpx;
    background: #fff;
}

.navigation.exit  icon, .navigation.home icon {
    color: #333;
}

.navigation.close>icon{
    color: #fff;
}
.navigation icon {
    line-height: 80rpx;
    font-size: 22px;
    width: 100%;
    text-align: center;
}
.navigation .icon_container{
    width: 100%;
    text-align: center;
}
.navigation .icon_container text{
    color: #fff;
    font-size: 14px;
    text-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
}

.shade {
    z-index: 1;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}