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

这篇具有很好参考价值的文章主要介绍了【uniapp】小程序自定义一个通用的返回按钮组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp 返回按钮自定义,uni-app,小程序,vue.js

左边箭头，右边文字可以自定义，但是不要太长，太长可以自己改 .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方法。文章来源地址https://www.toymoban.com/news/detail-517733.html

到了这里，关于【uniapp】小程序自定义一个通用的返回按钮组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！