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


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 window对象属性整理
Oct 24 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
浅谈JS的原型和继承
May 08 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 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命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
php自动加载代码实例详解
2021/02/26 PHP
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
vue按需加载实例详解
2019/09/06 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python实现文本文件合并
2015/12/29 Python
Python import与from import使用及区别介绍
2018/09/06 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
党的生日演讲稿
2014/09/10 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2014年采购部工作总结
2014/11/20 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
汽车销售员工作总结
2015/08/12 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python
详解SQL的窗口函数
2022/04/21 Oracle