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


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 相关文章推荐
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
容易被忽略的JS脚本特性
2011/09/13 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python logging日志模块的详解
2017/10/29 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Django异步任务线程池实现原理
2019/12/17 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
办理护照介绍信
2014/01/16 职场文书
学校元旦晚会方案
2014/02/19 职场文书
化妆品店促销方案
2014/02/24 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python