【uniapp】小程序自定义一个通用的返回按钮组件

左边箭头，右边文字可以自定义，但是不要太长，太长可以自己改 .back的width值，改宽一点。用这个组件的时候首先要在pages.json里把导航栏变成自定义的：组件：backPages.vue使用的时候需要传按钮名：backtext = ‘返回或者自定义’需要import引入组件并注册components才行，示例代码：............

小付学代码

8859人浏览 · 2022-08-05 15:15:54

小付学代码 · 2022-08-05 15:15:54 发布

左边箭头，右边文字可以自定义，但是不要太长，太长可以自己改 .back的width值，改宽一点。

用这个组件的时候首先要在pages.json里把导航栏变成自定义的：

,{
            "path" : "pages/test/test",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/shop/shop",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,

                //这个-->自定义导航栏
				"navigationStyle": "custom"
            }

组件：backPages.vue

<template>
	<view class="big_out">
		<!-- 左上角返回按钮 -->
		<!-- 这里为什么要加4px，是因为这个左箭头<的高度为16rpx需要下降一半，就是8rpx=4px,可以自己试一下，我这里没有问题 -->
		<view class="back"  :style="'margin-top:'+ (titletop+4)+'px'"  @click="back_page"> 
			<view class="back_img">
			</view>
			<view class="back_text">
				<slot>
					{{backtext}}
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "backPages",
		props: {
			backtext: String,
		},

		data() {
			return {
				titleheight: 0,
				titletop: 0
			};
		},
        //这里原来使用的onLoad一直有bug（不重新进入页面就会错位），
        // 后来使用onShow  更改于2022/09/30  以后再修改
		onShow() {
			//加载时调用 getHeight
			this.getHeight();
		},
		methods: {
			//利用胶囊按钮定位宽高
			getHeight() {
				let res = uni.getMenuButtonBoundingClientRect();
				this.titletop = res.top;
				this.titleheight = res.height
			},

			//直接返回上一级
			back_page() {
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			},
		}

	}
</script>

<style scoped>
	.big_out {
		position: fixed;
	    z-index: 999;
		/* background-color: red; */
	}

	.back {
		position: absolute;
		height: 50rpx;
		width: 120rpx;
	}

	.back_img {
		/* 用border值来控制箭头粗细 */
		border: 3px solid black;
		/* 上、右、下、左  四个边框的宽度 */
		border-width: 0px 2px 2px 0px;
		display: inline-block;
		/* padding值控制箭头大小 */
		padding: 5px;
		transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		margin-left: 30rpx;
	}

	.back_text {
		float: right;
	}
</style>

使用的时候需要传按钮名：backtext = ‘返回或者自定义’

需要import引入组件并注册components才行，示例代码：

<template>
	<view>
		<backPages backtext='返回' ></backPages>
	</view>
</template>

<script>
	import backPages from "@/components/backPages.vue"
	export default {
		components:{
			backPages
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

组件默认回到上一层级，自定义请更改组价的back_page方法。