最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2

主题

17

帖子

324

积分

诠释者

Rank: 4

积分
324
2019-1-1 21:25:15 w王海洋29 诠释者 楼主 01071
在微信小程序的官方文档中,我们发现做一个底部固定的菜单是可以在app.json上配置上去进?#20449;?#32622;的,这样的功能非常?#30475;螅?#20294;是?#20999;?#33756;单的样式留给我们自定义样式的却不多,
?#28909;?#19968;下的这种菜单的话。


在用app.json配置就凉凉了


像这种自定义的菜单呢,最好的还是做成模板了,接?#24080;?#25454;,?#31579;?#29992;也高了。首先呢,模板的作用和具体可以去看下官方文档。


首先新增一个管理模板的文件夹,这里我取名字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;}

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

index.js
Page({  data: {     //定义一个数组,数组每一项是对象,对象里面对应菜单的数据    //管理菜单的每一项的不同?#38382;?#36824;有不同布局结构需要的额外的?#38382;?nbsp;   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
模板的每一项对应一个菜单对象,也?#36864;擔?#25105;们在引入后还需要遍历navData数组,将不同?#38382;?#35835;取出来,由于我用的是es6的对象拓展符号,它会进行解构,可能现在模板看起来有很多人觉得疑问,怎么直接就写对象下的键呢,这个下面?#19968;?#35814;解~
这里主要处理的是,通过区分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,所以直?#26377;?#36807;来,当然啦,?#37096;?#20197;写在模板上哈,现在我们通过直接遍历navData,template 的is属性通过前面我们在nav.wxml上的template 的name属性可以知道我们正在用nav.wxml下的name为nav的模板,遍历navData,当前的对象是item,这个item对象就是navData里面的对象,包含有name,style,current等属性,通过...item?#23548;式?#24403;前对象解构了
这里简单说下来下具体...拓展符做了什么,当然啦,要记得再支持es6的浏览器打开测试哈,?#37096;?#20197;用webpack打包后测试啦
var obj={    a:1,    b:2,    c:3}console.log(...[obj]);

现在我们就知道了,为什么...item之后,模板只需要写键(属性名)就可以了,因为他把当前的那个对象解构了。
<import src="../../template/nav" />
<view class="flex fix_nav_wp">      <block wx:for="{{navData}}">          <template is="nav" data="{{...item}}"/>      </block> </view>


nav-demo.zip

20.15 KB, 下载?#38382;? 34

分享至 : QQ空间
1 人收藏
发新帖
您需要登录后才可以回帖 登录 | 立即注册
新时时彩软件