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

<!--底部导航 --> <view> <view data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg"> <image hidden='{{curIdx===index}}' src="https://www.jb51.net/{{item.imgUrl}}"></image> <image hidden='{{curIdx!==index}}' src="https://www.jb51.net/{{item.curUrl}}"></image> <view>{{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> <view data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg"> <image hidden='{{curIdx===index}}' src="https://www.jb51.net/{{item.imgUrl}}"></image> <image hidden='{{curIdx!==index}}' src="https://www.jb51.net/{{item.curUrl}}"></image> <view>{{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> <view data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg"> <image hidden='{{curIdx===index}}' src="https://www.jb51.net/{{item.imgUrl}}"></image> <image hidden='{{curIdx!==index}}' src="https://www.jb51.net/{{item.curUrl}}"></image> <view>{{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) }, // 底部导航结束 })

效果图：