小程序+vant：使用模板动态生成tabs

贼猫子

已于 2022-08-12 16:21:43 修改

阅读量789

点赞数

分类专栏：小程序文章标签：小程序前端

于 2022-08-12 16:11:11 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41700532/article/details/126303996

版权

小程序专栏收录该内容

8 篇文章

订阅专栏

该博客介绍了一个需求，即同步PC的菜单权限并在小程序中以tabs形式展示二级菜单。作者通过利用小程序的模板功能，实现了动态生成tabs选项卡，避免了使用wx:if进行逐个判断的方法。当点击tabs时，可以通过索引获取对应子组件ID并触发事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：同步pc的菜单权限，侧边出一级菜单，点击一级菜单后收起，界面用tabs选项卡形式出二级菜单！

这种就需要动态去生成tabs选项卡，除非你想全部引入，然后用wx:if一个个判断；
当时就在想小程序有什么是类似于vue的component，然后就想到了模板；

处理前二级菜单结构
menuList:[
	{title:‘菜单1’,key:'1',component:'views/page/PageOne/list'},
	{title:‘菜单2’,key:'2',component:'views/page/PageTwo/list'}
]
处理后
menuList:[
	{title:‘菜单1’,key:'1',component:'PageOne'},
	{title:‘菜单2’,key:'2',component:'PageTwo'}
]

模板页
<template name="PageOne">
  <PageOne id="PageOne" bind:getSearch="getSearch" menuId="{{menuId}}" />
</template>
<template name="PageTwo">
  <PageTwo id="PageTwo" bind:getSearch="getSearch" menuId="{{menuId}}" />
</template>

承载页wxml
<van-tabs wx:if="{{tabShow}}" ellipsis="{{false}}" active="{{ curIndex }}" custom-class="vanttabs" swipeable="{{true}}" bind:change="tabsChange">
    <van-tab title="{{item.title}}" name="{{index}}" wx:for="{{menuList}}" wx:key="key">
       <template is="{{item.component}}" data="{{menuId}}" />
     </van-tab>
</van-tabs>

在这里，我模板中的name跟组件id用的是一样的，这样在点击tabs触发组件页方法时，就可以通过获取当前tabs的索引获取到对应的id然后触发子组件事件

const {menuList,tabIndex} = this.data;
this.selectComponent(`#${menuList[tabIndex].component}`).getData()；