微信小程序-模板功能制作动态固定底部菜单

图像.jpg

今天是一月的最后一天。我最近真的很忙。借此机会写一篇文章。哈哈。我对我的赞美是认真的~

在微信小程序的官方文档中，我们发现可以在app中创建底部的固定菜单。在json上配置的功能非常强大，但留给我们定制的菜单样式很少，

图像.png

例如，这种菜单。

图像.png

使用app.json配置

尴尬.jpg

对于这样的定制菜单，最好的做法是将它们制作成模板，这样可以接收数据并使其可重用。首先，有关模板的作用和详细信息，请参见官方文档。

图像.png

图像.png

首先，添加用于管理模板的文件夹。这里我把它命名为模板。然后创建一个新的导航。模板中的wxml

原始静态模板没有嵌入数据。接下来，我用它制作一个动态模板，

<；/图标>

立即购买</text>

<；/图标>

名片</text>

发布</text>

<；/图标>

2

消息</text>

<；/图标>

我的</text>

样式app.wxss

/*图标字体小图标*/

/*为了更好地显示，忽略iconfont的字体文件代码。你可以下载它*/

页面｛字体大小：26rpx；颜色：#666；｝

.flex｛显示：-webkit flex；显示：flex；宽度：100%；｝

/*底部悬浮导航*/

.fix_nav_wp｛高度：110rpx；位置：固定；左侧：0；底部：0；背景：#fff；边框顶部：1rpx实心#e5e5e5；z索引：10｝

.fix_nav_wp.nav_link｛flex:1；｝

.fix_nav_wp按钮｛高度：110rpx；显示：flex；对齐内容：间距；对齐项目：居中；填充：0；字体大小：22rpx；

弯曲方向：柱；颜色：#999；位置：相对；}

.fix_ nav_ wp.tip_ tip｛位置：绝对；右侧：25rpx；顶部：5rpx；最小宽度：28rpx；线条高度：32rpx；

高度：32rpx；填充：0 8rpx；颜色：#fff；背景：#f00；边界半径：50em；边框：1rpx实心#fff；}

.fix_nav_wp.nav_link.iconfont｛高度：60rpx；字体大小：56rpx；线条高度：80rpx；颜色：#c4c8cc；｝

.fix_nav_wp.nav_link.plus_wp｛宽度：120rpx；高度：120rpx；边距顶部：-45rpx；｝

.fix_nav_wp.nav_link图像｛宽度：120rpx；高度：120rpx；｝

.fix_nav_wp.nav_link.txt｛高度：50rpx；线条高度：40rpx；颜色：#c4c8cc；｝

.fix_导航_ wp.导航_链接。current.txt｛color:#00a2e9；｝

.fix_nav_wp.nav_link.del_ico｛显示：块；｝

.fix_导航_ wp.导航_链接.cur_图标{