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

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

主要为大家详细介绍了微信小程序自定义底部导航带跳转功能，具有一定的参考价值，感兴趣的小伙伴们可以

参考一下

本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码，供大家参考，具体内容如下

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">

index.js

page({

const app = getApp();

data:{

// 底部导航

curIdx: 0,

listInfo: [

{

text: '首页',

curUrl: '/image/market_active.png',

},

{

text: '个人中心',

imgUrl: '/image/my.png',

curUrl: '/image/my_active.png',

},

]

},

Navigation: function (event) {

curIdx: e.currentTarget.dataset.current

})

// console.log(e)

// console.log(this.data.curIdx)

},

// 底部导航结束

})

app.wxss

/*自定义底部导航开始 */

.footer {

border-top:1rpx solid #ccc;

display: flex;

flex-direction: row;

}

.footer_list{

width:17%;

height:100%;

text-align:center;