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


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 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
javascript实现2048游戏示例
May 04 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
小程序自定义日历效果
Dec 29 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python中的sort方法使用详解
2014/07/25 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
python实现逻辑回归的方法示例
2017/05/02 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python实现多人聊天室
2020/03/31 Python
Python适配器模式代码实现解析
2019/08/02 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python动态视频下载器的实现方法
2019/09/16 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
传播学专业毕业生自荐信
2013/11/04 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
慰问信模板
2015/02/14 职场文书
2015大学迎新标语
2015/07/16 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书