微信小程序实现底部导航
之前我的做微信小程序的时候，需要一个底部导航样式，但是我搜索的时候，大部分都是写的一些小程序自定义的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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍微信小程序 （三）tabBar底部导航详细介绍，包括了微信小程序 （三）tabBar底部导航详细介绍的使用技巧和注意事项，需要的朋友参考一下 tabBar相对而言用的还是比较多的，但是用起来并没有难，在app.json中配置下tabBar即可，注意tabBar至少需要两个最多五个Item选项 主要属性： 对于tabBar整体属性设置： 对于tabBar中每个Item属性设置： 下面是
-
本文向大家介绍微信小程序 flex实现导航实例详解，包括了微信小程序 flex实现导航实例详解的使用技巧和注意事项，需要的朋友参考一下 微信小程序 flex实现导航实例详解 实现示意： 1.链接顶部内边距，留出圆形图标的位置。 2.伪元素:before绘制圆形。 3.圆形中添加图标。 4.左右外边距控制间距，及促使在需要的地方换行。 wxml： wxss： 如果需要字数限制的话： 感谢阅读，希望
-
本文向大家介绍微信小程序tabBar底部导航中文注解api详解，包括了微信小程序tabBar底部导航中文注解api详解的使用技巧和注意事项，需要的朋友参考一下 微信小程序tabBar底部导航中文注解api，信小程序tabBar就是app底部的那个导航栏，可以放1-5导航链接，这里对微信小程序底部导航tabbar的中文解释。 微信小程序tabBar是在全局app.json文件里面配置的。 小程序t
-
本文向大家介绍微信小程序 导入图标实现过程详解，包括了微信小程序 导入图标实现过程详解的使用技巧和注意事项，需要的朋友参考一下 图片素材库——阿里巴巴矢量图https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1359989” 在页面输入要搜索的图标 点击“入库”，然后“添加至项目” 选择“编辑”，即对进行编辑成
-
本文向大家介绍微信小程序实现留言板，包括了微信小程序实现留言板的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了微信小程序实现留言板的具体代码，供大家参考，具体内容如下 CSS： js： html 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍微信小程序实现聊天室，包括了微信小程序实现聊天室的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了微信小程序实现聊天室的具体代码，供大家参考，具体内容如下 正文： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。