微信小程序-自定义底部导航

之前我的做微信小程序的时候,需要一个底部导航样式,但是我搜索的时候,大部分都是写的一些小程序自定义的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;
}
文章来源:http://bbs.haoyangtian.com/forum.php?mod=viewthread&tid=5346
阅读更多
个人分类: 微信小程序
上一篇微信小程序-表单弹窗示例
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭