微信小程序实现每个页面的首页返回按钮上下拖动 (taro使用了MovableArea,MovableView实现，微信小程序类似)_taro movablearea

1.效果如图：

2.customNavBar.styl代码：

.home_area {
  position: fixed;
  right: 0rpx;
  width: 10rpx !important;
  height: 80vh !important;
  z-index: 998;
}
.home_view {
  text-align: center;
  line-height: 30rpx;
  padding: 10rpx;
  width: 110rpx;
  height: 36rpx;
  margin-left: -110rpx;
  background: #19B58E;
  border-radius:50rpx 0 0 50rpx;
  z-index: 999;
  position: absolute;
  right: 0rpx;
  top: 800rpx;
}
.home_title {
  text-align:center;
  color: #fff;
  padding: 10rpx 5rpx;
  font-family:PingFangSC-Medium;
  font-weight:500;
}

3.customNavBar.tsx代码：

import Taro, { Component, Config } from '@tarojs/taro'
import './customNavBar.styl'
import { AtNavBar, AtButton, AtIcon } from 'taro-ui'
import { View, Text, MovableArea, MovableView } from '@tarojs/components'
import { set as setGlobalData, get as getGlobalData } from '../../../constants/globalData'
export default class customNavBar extends Component {
 
    /**自定义的组件
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    /**
     * *************重要API*************
     * title：标题
     * left:是否展示左边图标
     * 其余的需要的时候再扩展
     * 使用：1、导入组件：import Cnavbar from '../../components/custom-NavBar/customNavBar'
     *      2、使用组件： <Cnavbar title='123' left={true}></Cnavbar>
     *
     */
    config: Config = {
        component: true,
    }
 
    constructor(props) {
        super(props);
    }
 
    handleClick(){
        Taro.navigateBack();
    }
    goToHome(){
      Taro.redirectTo({
        url: '/pages/index/index'
      });
    }
    render() {
        const navBarType= getGlobalData('navBarType');
        const {title,left}=this.props;
        const homeHide = this.props.homeHide ? true:false;
        return (
            <View className='page' >
                <AtNavBar
                    onClickLeftIcon={this.handleClick.bind(this, '返回')}
                    title={title}
                    leftIconType="{{left?'chevron-left':''}}"
                    fixed={true}
                    className="{{navBarType?'navBarX':'navBar'}}"
                />
              {homeHide
                ? ""
                : <MovableArea className="home_area">
                      <MovableView className="home_view" onClick={this.goToHome} direction='vertical'>
                        <AtIcon value='home' size='20' color='#fff'></AtIcon><Text className="home_title">首页</Text>
                      </MovableView>
                  </MovableArea>
              }
            </View>
        )
    }
}
 

4.其他页面引用：

import Cnavbar from '../components/custom-NavBar/customNavBar'
 
......
 
<View>
    <Cnavbar title='标题' left={false} homeHide={false}></Cnavbar>
</View>