微信小程序-自定义底部导航
一、前期准备工作
软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
1、基本需求。
- 实现用户自定义底部导航
2、案例目录结构
二、程序实现具体步骤
1.自定义nav.wxml代码
<template name="nav">
<view class="nav_link" bindtap="{{fn}}">
<button class="defalut_btn {{current== 0 ? '' : 'on_cor'}}">
<block wx:if="{{style == 0}}">
<icon class="iconfont {{ico}} del_ico idx_ico"></icon>
<text class="txt">{{name}}</text>
</block>
<block wx:if="{{style == 1}}">
<view class="plus_wp">
<image src='../../images/plus_ico.png' class="plus_ico" />
</view>
<text class="txt txt_fb">{{name}}</text>
</block>
</button>
</view>
</template>
2.使用index.wxml代码
<import src="../../template/nav" />
<view class="flex fix_nav_wp">
<block wx:for="{{navData}}" wx:key="">
<template is="nav" data="{{...item}}"/>
</block>
</view>
<view>首页</view>
3.index.js逻辑代码
a.初始化数据
/**
* 页面的初始数据
*/
data: {
navData: [
{
name: "广场", //文本
current: 1, //是否是当前页,0不是 1是
style: 0, //样式
ico: 'icon-qiugouguanli', //不同图标
fn: 'gotoIndex' //对应处理函数
}, {
name: "旧物",
current: 0,
style: 0,
ico: 'icon-mingpianjia',
fn: 'gotoOldGoods'
}, {
name: "发布",
current: 0,
style: 1,
ico: '',
fn: 'gotoPublish'
}, {
name: "招领",
current: 0,
style: 0,
ico: 'icon-yikeappshouyetubiao35',
fn: 'gotoRecruit'
}, {
name: "我的",
current: 0,
style: 0,
ico: 'icon-wode',
fn: 'gotoMine'
},
],
},
b.页面之间的跳转
gotoOldGoods: function(){
wx.redirectTo({
url: '/pages/oldgoods/oldgoods',
});
},
gotoPublish:function(){
wx.redirectTo({
url: '/pages/publish/publish',
});
},
gotoRecruit:function(){
wx.redirectTo({
url: '/pages/recruit/recruit',
});
},
gotoMine:function(){
wx.redirectTo({
url: '/pages/mine/mine',
});
},
三、案例运行效果图
四、总结与备注
暂无微信小程序-自定义底部导航
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
微信小程序-自定义底部导航的更多相关文章
- 微信小程序自定义底部导航栏组件+跳转
微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...
- 微信小程序设置底部导航栏目方法
微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了 ...
- 微信小程序~TabBar底部导航切换栏
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
- 微信小程序-自定义菜单导航(实现楼梯效果)
设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant U ...
- 微信小程序自定义顶部导航
注释:自定义导航需要自备相应图片 一.设置自定义顶部导航 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏. 1 ...
- 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle
这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...
- 微信小程序自定义下导航页面切换效果的合理写法
上图::: 导航模板内容页面的定义: <template name="naviBot"> <view class='navwrap t_cen font_26 ...
- 微信小程序(底部导航的实现)
详情请看官方文档介绍: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html 在根目录配置文件app.json中配置底部导航: ...
- 微信小程序tabBar底部导航 不显示问题解析
2019年十月八号 转藏: 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/wy_Blo ...
随机推荐
- Informatica 常用组件Lookup缓存之二 使用永久查找高速缓存
可以将"查找"转换配置为使用非永久或永久高速缓存.基于"查找高速缓存永久"属性的会话成功后,PowerCenter 将保存或删除查找高速缓存文件. 如果查找表在 ...
- 【泛型】Generic 参数化类型 类型转换
参考: http://blog.csdn.net/lonelyroamer/article/details/7864531#comments http://blog.csdn.net/lonelyro ...
- 配置sonarqube+maven
Maven与Sonar配合使用 准备工作:下载sonarqube源码即可 步骤: 1).安装sonar 解压,启动sonarqube-4.1\bin\windows-x86-32目录下的 ...
- mongo 3.0 备份和还原数据库 ,及too many positional arguments错误
在mongo 3.0的操作 备份示例 ./mongodump -h localhost -d liongo -o ./ 错误方式: ./mongorestore -h 127.0.0.1 -d lio ...
- Android应用开发学习笔记之Fragment
作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz Fragment翻译成中文就是“碎片”.“片断”的意思,Fragment通常用来作为一个Activity用户界面的一 ...
- 【5】基于Log4Net的日志系统
阅读目录 日志系统应具备的特性 Log4Net 配置文件:log4net.config 初始化 输出信息 对Log4Net的封装 log4net.config复杂配置 不管是Web应用程序还是W ...
- cygwin64安装wget和apt-cyg
说实话,网上的教程要么不适用,要么不能用,唯有多次试错之后才杀出一条血路. 1.安装cygwin 2.勾选wget 这个如果忘记勾选了,就再次打开setup.exe,选择如下操作,即可. 然后点击下一 ...
- 一段遍历4X4表格,取出每个单元格内容组合成文本的JS代码
遍历表格的JS容易忘,留个随笔以备忘. var tableData=""; var table=document.getElementById("XXTableId ...
- jsAnim简单使用教程
引入jsAnim.js 定义动画元素 元素需要有position:relative;或者position:absolute;属性 添加js <!DOCTYPE HTML> <html ...
- 【Window OS】”对于目标文件系统,文件XXXXX过大“导致无法进行文件操作的解决方法
问题原因:这是目标文件系统不支持这么大的文件的操作问题.例如:目标文件系统的格式是FAT32,FAT32最大支持4G,如果你要进行发送或粘贴4G以上的文件就会出现这个问题. 解决办法:把目标文件系统的 ...