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

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> 

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

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

去下载源码

欢迎访问我的个人网站zhengyepan