当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现底部导航

微信小程序实现底部导航

2018年11月26日  | 移动技术网IT编程  | 我要评论

之前我的做微信小程序的时候，需要一个底部导航样式，但是我搜索的时候，大部分都是写的一些小程序自定义的tabbar的样式，而当时我在网上有一个地方找到了这个模板，现在介绍给大家参考。

wxml代码：

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

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'
   }, {
    name: "个人中心",
    current: 0,
    style: 0,
    ico: 'icon-wode',
    fn: 'bindviewmy'
   },
  ],
 
 },
 
})

wxss代码：

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}
 
.userinfo-nickname {
 color: #aaa;
}
 
.usermotto {
 margin-top: 200px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网