微信小程序实现底部导航

来源：动视网责编：小采时间：2020-11-27 22:04:29

微信小程序实现底部导航

微信小程序实现底部导航:之前我的做微信小程序的时候，需要一个底部导航样式，但是我搜索的时候，大部分都是写的一些小程序自定义的tabBar的样式，而当时我在网上有一个地方找到了这个模板，现在介绍给大家参考。 WXML代码： <import src=../../template/nav

推荐度：

点击下载本文 文档为doc格式

导读微信小程序实现底部导航:之前我的做微信小程序的时候，需要一个底部导航样式，但是我搜索的时候，大部分都是写的一些小程序自定义的tabBar的样式，而当时我在网上有一个地方找到了这个模板，现在介绍给大家参考。 WXML代码： <import src=../../template/nav

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

微信小程序实现底部导航

推荐度：

点击下载本文 文档为doc格式

标签：设置微信小程序实现

热门焦点

微信小程序实现底部导航

微信小程序实现底部导航

微信小程序实现底部导航

最新推荐

猜你喜欢

热门推荐