zoukankan      html  css  js  c++  java
  • ColorUI-UniApp 导航栏返回上一页按钮设置自定义的页面

    问题:

    ColorUI-UniApp 导航栏返回只能返回上一页,如何设置自定义的页面?

    解析:

    1.找到colorUi下的导航组件 cu-custom.vue

    2.定义一个自定义导航的url属性

    props: {
        // 定义一个导航url属性,如果有这个属性就使用这个跳转url
        url: {
            type: String,
            default: ''
        }
    },
    

    3. 修改跳转方法

    BackPage() {
        if (this.url) {
            uni.redirectTo({url: this.url})
        } else {
            if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
                let url = '/' + __wxConfig.pages[0]
                return uni.redirectTo({
                    url
                })
            }
            uni.navigateBack({
                delta: 1
            });
        }
    }
    

    4. 如何传url值呢?

    比如从a页面跳转到b页面,然后在从b跳回c页面,最后从c跳转到b页面。如果不设置自定义url属性,点击c页面的返回直接跳到a页面了,为了解决这个问题在从b跳转到c页面的时候把b页面的相对路径传给c页面作为c页面跳转回到b页面的url即可。

    // b页面跳转处
    <navigator class="cu-item" navigateTo v-for="(user, index) in userData" :key="index" hover-class="none" 
    			:url="jump(user)" open-type="redirect"></navigator >
    
    // 跳转页面
    jump: function(user) {
        let data = {
            title: '用户详情',
            user: user,
            url: '../user/user-query' // 注意这个地址是a页面跳转到b(当前页)的相对地址
        }
        return this.contract(this.sonUrl, data) // 返回一个拼接好的地址
    }
    
    // c页面详情 注意这个url就是要返回的页面的地址,就是上面的'../user/user-query'
    <cu-custom :isBack="true" :url="url">
    	<block slot="backText">返回</block>
    	<block slot="content">{{ title }}</block>
    </cu-custom>
    
  • 相关阅读:
    Spring MVC,绑定数组、集合
    kettle 使用 CARTE 执行
    正交投影矩阵_相机中的透视投影几何——讨论相机中的正交投影
    VS 遇到异常 可能是某个扩展导致的 解决方法 和提升程序管理员权限的方法
    IDEA Community环境搭建笔记
    PHP ROT18加解密
    C# TTS 文字转语音
    软件开发文档【模板】
    java 打印日志 规范建议
    java 死锁 排查 (jstack jconsole jvisualvm jmc)
  • 原文地址:https://www.cnblogs.com/codebook/p/12508149.html
Copyright © 2011-2022 走看看