小程序动态加载底部导航（根据不同角色展示不同导航栏）

Posted 2023-04-30

参考技术A 测试发现 小程序组件（这里指底部导航组件）生命周期的attached 不支持操作 也就是 当想修改底部导航的内容是不支持的

所以上述写法会出现惊奇的结果 哈哈 可以自行运行看看

先了解一下小程序组件的生命周期

[图片上传中...(image-9202b1-1629959126527-0)]

于是我使用了ready 测试发现 部分安卓机 可以操作数据 但是页面底部导航不会更新

看文档发现：

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

于是， （这里是在小程序底部导航组件里写这个方法）

测试发现 还是没有更改过来

找资料看到

即可

根据用户角色隐藏导航栏

嘿，我尝试根据用户角色制作三个不同的导航栏。我只希望根据其访客，用户或管理员显示导航栏之一。现在，我只想显示根据x = 1或不同的其他导航栏（se js代码）。

有人可以帮我吗？现在我已经累了。但这只是行不通的。我不太擅长编程，所以请不要使其变得复杂。

HTML file

<!--Navigationbar-->
<div class="NavigationBar" id="alle">
<ul>
    <!--Fælles navigationsbar-->
    <li><a href="Forside.html">Forside</a></li>
    <li><a href="BehandlingsTyper.html">Behandlingstyper</a></li>
    <li><a href="LogIn.html">Booking</a></li>
    <li><a href="omMig.html">Om mig</a></li>
    <li><a href="omMig.html">Kontakt</a></li>
</ul>
</div>

<div class="NavigationBar" id="user">
    <ul>
        <!--Bruger navigationbar-->
        <li><a href="Forside.html">Forside</a></li>
        <li><a href="BehandlingsTyper.html">Behandlingstyper</a></li>
        <li><a href="LogIn.html">Booking</a></li>
        <li><a href="omMig.html">Om mig</a></li>
        <li><a href="omMig.html">Kontakt</a></li>

        <li><a href="omMig.html">Se mine tider</a></li>
    </ul>
</div>

<div class="NavigationBar" id="admin">
    <ul>
        <!--Admin navigationbar-->
        <li><a href="Forside.html">Forside</a></li>
        <li><a href="BehandlingsTyper.html">Behandlingstyper</a></li>
        <li><a href="LogIn.html">Booking</a></li>
        <li><a href="omMig.html">Om mig</a></li>
        <li><a href="omMig.html">Kontakt</a></li>

        <li><a href="omMig.html">Tilføj tider</a></li>
        <li><a href="omMig.html">Se booket tider</a></li>
    </ul>
</div>

<script type="text/javascript" src="elementHider.js"></script>

Javascript file
x = 1

if (x==0) 
    (#alle).show;
 else 
    ("#all").hide;


if (x==0)
    ("#user").show;
 else 
    ("#user").hide;


if (x==101)
    ("#admin").show;
 else 
    ("#admin").hide;

答案

使用

document.querySelector('#all').style.display = 'none';

[没有像jQuery一样的内置方法.hide()或.show()。

另一答案

如果我理解您的正确，那么这就是您必须要做的：

x = 0;

//Check role, could also do this in switch statement. 
//But for now like this since it might be easyer to understand. 
//Probably if you copy paste this it wont work but I think this part is needed.
if (user == guest) 
   x = 0;
 else if (user == user) 
   x = 1;
 else if (user == admin) 
   x = 2;



//Guest
if (x==0) 
    (#alle).show;
 else 
    ("#alle").hide;


//user
if (x==1)
    ("#user").show;
 else 
    ("#user").hide;


//Admin
if (x==2)
    ("#admin").show;
 else 
    ("#admin").hide;