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

/ 10评 / 4

images.jpg

今天是一月份的最后一天,最近实在是太忙(lan)了,趁着这个机会搞篇文章哈哈,一本正经的求个赞~
在微信小程序的官方文档中,我们发现做一个底部固定的菜单是可以在app.json上配置上去进行配置的,这样的功能非常强大,但是那些菜单的样式留给我们自定义样式的却不多,

image.png
比如一下的这种菜单的话。

image.png

在用app.json配置就...

尴尬了.jpg

像这种自定义的菜单呢,最好的还是做成模板了,接收数据,可复用也高了。首先呢,模板的作用和具体可以去看下官方文档。

image.png

image.png

首先新增一个管理模板的文件夹,这里我取名字template,然后tempalte里面新建一个nav.wxml,作为模板
原始的静态模板,没有数据嵌入的,接下来我用这个来做成动态可以,

<view class="flex fix_nav_wp">
<view class="nav_link" bindtap='gotoCompanyIndex'>
<button class="defalut_btn on_cor">
<icon class="iconfont icon-qiugouguanli del_ico idx_ico"></icon>     
<text class="txt">今日求购</text>
</button>
</view>
<view class="nav_link" bindtap='gotobusinessCard'>
<button class="defalut_btn">
<icon class="iconfont icon-mingpianjia del_ico job_ico mp_ico"></icon>
<text class="txt">名片</text>
</button>
</view>
<view class="nav_link ">
<button class="defalut_btn" bindtap='gotopublish'>
<view class="plus_wp">
<image src='../../images/plus_ico.png' class="plus_ico" />
</view>
<text class="txt txt_fb">发布</text>
</button>
</view>
<view class="nav_link">
<button class="defalut_btn" bindtap='gotoMessages'>
<icon class="iconfont icon-yikeappshouyetubiao35 del_ico man_ico xiaox_ico"></icon>
<text  class="tip_tip">2</text>
<text class="txt">消息</text>
</button>
</view>
<view class="nav_link">
<button class="defalut_btn" bindtap='bindViewMy'>
<icon class="iconfont icon-wode del_ico mine_ico my_ico"></icon>
<text class="txt">我的</text>
</button>
</view>
</view>

样式app.wxss

/* iconfont小图标 */
/*为了更好展示,iconfont的字体文件代码忽略辣,各位道友可以下载时候看*/
page{font-size:26rpx;color:#666;}
.flex{display:-webkit-flex;display: flex;width:100%;}
/*  底部悬浮导航  */
.fix_nav_wp{height:110rpx;position: fixed;left:0;bottom:0;background:#fff;border-top:1rpx solid #e5e5e5;z-index: 10}
.fix_nav_wp .nav_link{flex:1;}
.fix_nav_wp button{height:110rpx;display: flex;justify-content:space-between;align-items: center;padding:0;font-size:22rpx;
flex-direction: column;color:#999;position: relative;}
.fix_nav_wp .tip_tip{position: absolute;right:25rpx;top:5rpx;min-width:28rpx;line-height:32rpx;
height: 32rpx;padding:0 8rpx;color:#fff;background:#f00;border-radius:50em;border:1rpx solid #fff;}
.fix_nav_wp .nav_link .iconfont{height:60rpx;font-size:56rpx;line-height: 80rpx;color: #c4c8cc;}
.fix_nav_wp .nav_link .plus_wp{width:120rpx;height:120rpx;margin-top: -45rpx;}
.fix_nav_wp .nav_link  image{width:120rpx;height:120rpx;}
.fix_nav_wp .nav_link .txt{height:50rpx;line-height:40rpx;color: #c4c8cc;}
.fix_nav_wp .nav_link.current .txt{color:#00a2e9;}
.fix_nav_wp .nav_link .del_ico{display: block;}
.fix_nav_wp .nav_link .cur_ico{display: none;}
.fix_nav_wp .nav_link.current .del_ico{display: none;}
.fix_nav_wp .nav_link.current .cur_ico{display: block;color:#00a2e9;}
.fix_nav_wp .nav_link .txt_fb{line-height: 18rpx}
.fix_nav_wp .nav_link .mp_ico{font-size: 50rpx;line-height: 80rpx}
.fix_nav_wp .nav_link .xiaox_ico{font-size: 64rpx;line-height: 70rpx;}
.fix_nav_wp .nav_link .my_ico{font-size: 56rpx;}
.fix_nav_wp .on_cor .del_ico, .fix_nav_wp .on_cor .txt{color: #00a2e9}
/* 清楚按钮的默认样式  */
.defalut_btn{background: transparent;border:none;overflow: visible;padding-left:0;padding-right:0;
margin-left:0;margin-right:0;border-radius:0;}
.defalut_btn:after{display: none;}
.text-primary{color:#00a2e9;}

加上样式后展示是这样的:
展示效果.png

接下来,我们放在index.wxml上展示这个模板,并且在index.js上动态传递底部菜单的参数等等,这样在每个需要用到这个模板功能的时候就可以在对应页面的js里面传递不同参数。以下代码我会尽量注释,让每个看官都能看懂哈,如果不理解,或是有问题的,可以在评论提出哈~

index.js

Page({
  data: {
     //定义一个数组,数组每一项是对象,对象里面对应菜单的数据
    //管理菜单的每一项的不同参数,还有不同布局结构需要的额外的参数
    navData: [    
      {
        name: "今日求购",  //文本
        current: 1,    //是否是当前页,0不是  1是
        style: 0,     //样式
        ico: 'icon-qiugouguanli',  //不同图标
        fn: 'gotoCompanyIndex'   //对应处理函数
      }, {
        name: "名片",
        current: 0,
        style: 0,
        ico: 'icon-mingpianjia',
        fn: 'gotobusinessCard'
      }, {
        name: "发布",
        current: 0,
        style: 1,
        ico: '',
        fn: 'gotopublish'
      }, {
        name: "消息",
        current: 0,
        style: 0,
        ico: 'icon-yikeappshouyetubiao35',
        fn: 'gotoMessages',
        msg:2   //因为消息是这个“消息”特有的,所以只有这个对象下游msg键值
      }, {
        name: "我的",
        current: 0,
        style: 0,
        ico: 'icon-wode',
        fn: 'bindViewMy'
      },
    ],

  },

});

nav.wxml

模板的每一项对应一个菜单对象,也就说,我们在引入后还需要遍历navData数组,将不同参数读取出来,由于我用的是es6的对象拓展符号,它会进行解构,可能现在模板看起来有很多人觉得疑问,怎么直接就写对象下的键呢,这个下面我会详解~

这里主要处理的是,通过区分style不同布局结构,通过其他结构布局都保持一致,并且有消息显示的做特别判断

<template name="nav">
<view class="nav_link" bindtap="{{fn}}">
<button class="defalut_btn {{current==0?'':'on_cor'}}">  
<block wx:if="{{style==0}}">
<icon class="iconfont {{ico}} del_ico idx_ico"></icon>
<text wx:if="{{msg>0}}" class="tip_tip">{{msg}}</text>
<text class="txt">{{name}}</text>
</block>
<block wx:if="{{style==1}}">   
<view class="plus_wp">
<image src='../../images/plus_ico.png' class="plus_ico" />
</view>
<text class="txt txt_fb">{{name}}</text>
</block>
</button> 
</view>
</template>

index.wxml

通过import 将模板引入到index.wxml,我们静态数据下,有个最外层类名为flex fix_nav_wp的view,所以直接写过来,当然啦,也可以写在模板上哈,现在我们通过直接遍历navData,template 的is属性通过前面我们在nav.wxml上的template 的name属性可以知道我们正在用nav.wxml下的name为nav的模板,遍历navData,当前的对象是item,这个item对象就是navData里面的对象,包含有name,style,current等属性,通过...item实际将当前对象解构了

这里简单说下来下具体...拓展符做了什么,当然啦,要记得再支持es6的浏览器打开测试哈,也可以用webpack打包后测试啦

var obj={
    a:1,
    b:2,
    c:3
}
console.log(...[obj]);

image.png

现在我们就知道了,为什么...item之后,模板只需要写键(属性名)就可以了,因为他把当前的那个对象解构了,关于解构的知识可以看下阮一峰大神的开源书籍 ECMAScript 6 入门变量的结构赋值。接下来就好办了,具体看具体实现代码啦~

<import src="../../template/nav" />
<view class="flex fix_nav_wp">
      <block wx:for="{{navData}}">
          <template is="nav" data="{{...item}}"/>
      </block>
 </view> 

如果你还有什么不清楚的,欢迎讨论交流,共同进步~

给个小程序包,有需要的可以来下载哦,求赞求关注~
现在下载源码

10条回应:“微信小程序-模板功能制作动态固定底部菜单”

  1. 李想说道:

    大佬,我想问一下你上面注释的是current: 1,这个用来标志是否是当前页,如果不是呢?怎么进行跳转啊?

  2. 李想说道:

    是不是需要绑定一个事件?navigate to 然后跳转别的页面?

  3. 风之影说道:

    大神,感谢你的分享..有个小白的问题,就是我想动态改变菜单的选择状态需要怎么做呢? 应该有比在每个菜单的响应函数下用this.data.navData[n].current=0;if n不等于本时this.data.navData[0].current=1的办法吧.谢谢

    • 郑 叶潘说道:

      @风之影 因为这个模板的data是要每个页面都传递进去的呀,所以是可以对某个菜单做状态选择的,具体就像是操作data里面的数据一样的。如果你不清楚,可以留言交流哈

  4. 风之影说道:

    还请问那图标的样式怎么看呢?

发表评论

电子邮件地址不会被公开。 必填项已用*标注