【uniapp】小程序自定义一个通用的返回按钮组件
左边箭头，右边文字可以自定义，但是不要太长，太长可以自己改 .back的width值，改宽一点。
用这个组件的时候首先要在pages.json里把导航栏变成自定义的：
- ,{
- "path" : "pages/test/test",
- "style" :
- {
- "navigationBarTitleText": "",
- "enablePullDownRefresh": false
- }
- }
- ,{
- "path" : "pages/shop/shop",
- "style" :
- {
- "navigationBarTitleText": "",
- "enablePullDownRefresh": false,
- //这个-->自定义导航栏
- "navigationStyle": "custom"
- }
组件：backPages.vue
- {{backtext}}
- 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 // 返回的页面数
- })
- },
- }
- }
- .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;
- }
使用的时候需要传按钮名：backtext = ‘返回或者自定义’
需要import引入组件并注册components才行，示例代码：
- import backPages from "@/components/backPages.vue"
- export default {
- components:{
- backPages
- },
- data( ) {
- return {
- }
- },
- methods: {
- }
- }
组件默认回到上一层级，自定义请更改组价的back_page方法。
转：https://blog.csdn.net/ONLYSRY/article/details/126178045
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
