微信小程序自定義底部導(dǎo)航帶跳轉(zhuǎn)功能

2020-03-21 16:06:20

字體：大中小

供稿：網(wǎng)友

本文實(shí)例為大家分享了微信小程序實(shí)現(xiàn)底部導(dǎo)航帶跳轉(zhuǎn)功能的具體代碼，供大家參考，具體內(nèi)容如下

index.wxml

<!--底部導(dǎo)航 --><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><!--底部導(dǎo)航 -->

index.js

page({  const app = getApp(); data:{   // 底部導(dǎo)航  curIdx: 0,  listInfo: [  {   text: '首頁(yè)',   imgUrl: '/image/index.png',   curUrl: '/image/index_active.png',  },  {   text: '兼職入口',   imgUrl: '/image/market.png',   curUrl: '/image/market_active.png',  },  {   text: '個(gè)人中心',   imgUrl: '/image/my.png',   curUrl: '/image/my_active.png',  },  ]  }, Navigation: function (event) { var that = this; app.Navigation(event, that); }, // 底部導(dǎo)航 chooseImg: function (e) { this.setData({  curIdx: e.currentTarget.dataset.current }) // console.log(e) // console.log(this.data.curIdx)  }, // 底部導(dǎo)航結(jié)束})

app.wxss

/*自定義底部導(dǎo)航開(kāi)始 */.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;}/*底部導(dǎo)航結(jié)束 */

part-time.wxml

<!--底部導(dǎo)航 --><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><!--底部導(dǎo)航 -->

part-time.js

page({ const app = getApp(); data:{   // 底部導(dǎo)航 curIdx: 1, listInfo: [  {  text: '首頁(yè)',  imgUrl: '/image/index.png',  curUrl: '/image/index_active.png',  },  {  text: '兼職入口',  imgUrl: '/image/market.png',  curUrl: '/image/market_active.png',  },  {  text: '個(gè)人中心',  imgUrl: '/image/my.png',  curUrl: '/image/my_active.png',  }, ] },  Navigation: function (event) { var that = this; app.Navigation(event, that); }, // 底部導(dǎo)航 chooseImg: function (e) { this.setData({  curIdx: e.currentTarget.dataset.current }) // console.log(e) // console.log(this.data.curIdx)  }, // 底部導(dǎo)航結(jié)束})

my.wxml

<!--底部導(dǎo)航 --><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><!--底部導(dǎo)航 -->

Page({const app = getApp(); /**  * 頁(yè)面的初始數(shù)據(jù)  */ data: { // 底部導(dǎo)航 curIdx: 2, listInfo: [  {  text: '首頁(yè)',  imgUrl: '/image/index.png',  curUrl: '/image/index_active.png',  },  {  text: '兼職入口',  imgUrl: '/image/market.png',  curUrl: '/image/market_active.png',  },  {  text: '個(gè)人中心',  imgUrl: '/image/my.png',  curUrl: '/image/my_active.png',  }, ] }, // 導(dǎo)航 Navigation: function (event) { var that = this; app.Navigation(event, that); }, // 底部導(dǎo)航 chooseImg: function (e) { this.setData({  curIdx: e.currentTarget.dataset.current }) // console.log(e) // console.log(this.data.curIdx)  }, // 底部導(dǎo)航結(jié)束})

效果圖：

微信小程序,底部導(dǎo)航,跳轉(zhuǎn)