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


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类库D
Oct 24 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 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调用三种数据库的方法(1)
2006/10/09 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
领导视察欢迎词
2014/01/15 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
三年级学生期末评语
2014/12/26 职场文书
师德师风个人总结
2015/02/06 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
python高温预警数据获取实例
2022/07/23 Python