欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实现底部导航

程序员文章站 2023-11-07 19:18:16
之前我的做微信小程序的时候,需要一个底部导航样式,但是我搜索的时候,大部分都是写的一些小程序自定义的tabbar的样式,而当时我在网上有一个地方找到了这个模板,现在介绍给大...

之前我的做微信小程序的时候,需要一个底部导航样式,但是我搜索的时候,大部分都是写的一些小程序自定义的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;
}


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。