微信小程序自定义底部导航带跳转功能


Posted in Javascript onNovember 27, 2018

本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下

index.wxml

<!--底部导航 -->
<view class='footer'>
 <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg">
 <image class="footer-image" hidden='{{curIdx===index}}' src="{{item.imgUrl}}"></image>
 <image class="footer-image" hidden='{{curIdx!==index}}' src="{{item.curUrl}}"></image>
 <view class="footer-text">{{item.text}}</view>
 </view>
</view>
<!--底部导航 -->

index.js

page({
 
 const app = getApp();
 data:{
   // 底部导航
  curIdx: 0,
  listInfo: [
  {
   text: '首页',
   imgUrl: '/image/index.png',
   curUrl: '/image/index_active.png',
  },
  {
   text: '兼职入口',
   imgUrl: '/image/market.png',
   curUrl: '/image/market_active.png',
  },
  {
   text: '个人中心',
   imgUrl: '/image/my.png',
   curUrl: '/image/my_active.png',
  },
  ] 
 },
 Navigation: function (event) {
 var that = this;
 app.Navigation(event, that);
 },
 // 底部导航
 chooseImg: function (e) {
 this.setData({
  curIdx: e.currentTarget.dataset.current
 })
 // console.log(e)
 // console.log(this.data.curIdx) 
 },
 // 底部导航结束
})

app.wxss

/*自定义底部导航开始 */
.footer {
 position: fixed; 
 bottom: 0;
 width: 100%;
 height:100rpx; /*footer的高度*/
 background: #ffffff;
 z-index: 500;
 border-top:1rpx solid #ccc;
 display: flex;
 flex-direction: row;
}
.footer_list{
width:17%;
height:100%;
text-align:center;
padding-top:8rpx;
margin-left:60rpx;
margin-right:62rpx;
}
.footer-image{
 width:40%;
 height:45%;
}
.footer-text{
 font-size: 22rpx;
}
/*底部导航结束 */

part-time.wxml

<!--底部导航 -->
<view class='footer'>
 <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg">
 <image class="footer-image" hidden='{{curIdx===index}}' src="{{item.imgUrl}}"></image>
 <image class="footer-image" hidden='{{curIdx!==index}}' src="{{item.curUrl}}"></image>
 <view class="footer-text">{{item.text}}</view>
 </view>
</view>
<!--底部导航 -->

part-time.js

page({
 const app = getApp();
 data:{
   // 底部导航
 curIdx: 1,
 listInfo: [
  {
  text: '首页',
  imgUrl: '/image/index.png',
  curUrl: '/image/index_active.png',
  },
  {
  text: '兼职入口',
  imgUrl: '/image/market.png',
  curUrl: '/image/market_active.png',
  },
  {
  text: '个人中心',
  imgUrl: '/image/my.png',
  curUrl: '/image/my_active.png',
  },
 ]
 },
  Navigation: function (event) {
 var that = this;
 app.Navigation(event, that);
 },
 // 底部导航
 chooseImg: function (e) {
 this.setData({
  curIdx: e.currentTarget.dataset.current
 })
 // console.log(e)
 // console.log(this.data.curIdx) 
 },
 // 底部导航结束
})

my.wxml

<!--底部导航 -->
<view class='footer'>
 <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg">
 <image class="footer-image" hidden='{{curIdx===index}}' src="{{item.imgUrl}}"></image>
 <image class="footer-image" hidden='{{curIdx!==index}}' src="{{item.curUrl}}"></image>
 <view class="footer-text">{{item.text}}</view>
 </view>
</view>
<!--底部导航 -->
Page({
const app = getApp();
 /** 
 * 页面的初始数据 
 */
 data: {
 // 底部导航
 curIdx: 2,
 listInfo: [
  {
  text: '首页',
  imgUrl: '/image/index.png',
  curUrl: '/image/index_active.png',
  },
  {
  text: '兼职入口',
  imgUrl: '/image/market.png',
  curUrl: '/image/market_active.png',
  },
  {
  text: '个人中心',
  imgUrl: '/image/my.png',
  curUrl: '/image/my_active.png',
  },
 ]
 },
 // 导航
 Navigation: function (event) {
 var that = this;
 app.Navigation(event, that);
 },
 // 底部导航
 chooseImg: function (e) {
 this.setData({
  curIdx: e.currentTarget.dataset.current
 })
 // console.log(e)
 // console.log(this.data.curIdx) 
 },
 // 底部导航结束
})

效果图:

微信小程序自定义底部导航带跳转功能

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

Javascript 相关文章推荐
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
jquery拖动改变div大小
Jul 04 jQuery
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 #Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
js replace替换字符串同时替换多个方法
Nov 27 #Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 #Javascript
使用electron制作满屏心特效的示例代码
Nov 27 #Javascript
30分钟快速实现小程序语音识别功能
Nov 27 #Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 #Javascript
You might like
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
js简易版购物车功能
2017/06/17 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
python 默认参数问题的陷阱
2016/02/29 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
送给他或她的礼物:FUN.com
2018/08/17 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
答谢词范文
2015/01/05 职场文书
幼儿园感谢信
2015/01/21 职场文书
单位推荐信范文
2015/03/27 职场文书