微信小程序-自定义底部导航
一、前期准备工作
软件环境:微信开发者工具
官方下载地址: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 ...
随机推荐
- umlの活动图
在介绍了曾经的类图和用例图等之后,因为对象图是描写叙述类图的某一个时刻的快照,所以类图没有详细的赋值可是对象图能够有详细的值.而包图是蕴含在画uml图之中的,对类图和对象图等进行分类的图,就像wind ...
- .NET:CLR via C# Assembly Loading
基础知识 Internally, the CLR attempts to load this assembly by using the System.Reflection.Assembly clas ...
- MAC之tar解压与压缩打包命令
tar [-cxtzjvfpPN] 文件与目录 ....参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令!-t :查看 tarfile 里面的文件! ...
- springboot 注入 restTemplate
手动实例化,这个我基本不用 RestTemplate restTemplate = new RestTemplate(); 依赖注入,通常情况下我使用 java.net 包下的类构建的 SimpleC ...
- 22.线程通信Condition
Condition 通过此对象可以与lock实现组合使用,为每个对象提供多个等待,实现多个阻塞队列. package dmeo9; import java.util.concurrent.lo ...
- DELPHI中千万别直接使用CreateThread ,建议使用BeginThread(在C++中无大问题,可是到了DELPHI中情况就不一样了)
以前在写个别程序的时候老是喜欢使用纯API编程. 在C++中无大问题,可是到了DELPHI中情况就不一样了. 当你用 DELPHI写的多线程程序莫名其妙的内存错误,特别是字符串(string)操作; ...
- SQL Server中的database checkpoint
基于性能方面的考虑, 数据库引擎会在内存(buffer cache)中执行数据库数据页(pages)的修改, 不会再每次做完修改之后都把修改了的page写回到磁盘上. 更准确的说, 数据库引擎定期在每 ...
- 使用svgdeveloper 和 svg-edit 绘制svg地图
目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一.SVGDeveloper 5. 方法二.SVG-Edit 1. 描述编辑 有的时候我们需要自定义地图,本文提 ...
- 超级简单的jquery操作表格(添加/删除行、添加/删除列)
利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...
- android 地址控件概述
最近,公司做项目,需要一个地址控件,本来是想androidcopy开源的android的地址控件,但是了,找来找去.都没有找到一个真正满足我的需求的,普通的地址控件只是精确到市县区三级,但是我们的需求 ...