微信小程序自定義底部導航帶跳轉功能

2020-03-21 16:06:20

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了微信小程序實現底部導航帶跳轉功能的具體代碼，供大家參考，具體內容如下

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)  }, // 底部導航結束})

效果圖：

微信小程序,底部導航,跳轉