微信小程序实现每个页面的首页返回按钮上下拖动 (taro使用了MovableArea,MovableView实现,微信小程序类似)
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>