您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)怎么在微信小程序中自定義底部導(dǎo)航帶跳轉(zhuǎn),文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
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: '首頁', 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)航開始 */ .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: '首頁', 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(); /** * 頁面的初始數(shù)據(jù) */ data: { // 底部導(dǎo)航 curIdx: 2, listInfo: [ { text: '首頁', 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é)束 })
關(guān)于怎么在微信小程序中自定義底部導(dǎo)航帶跳轉(zhuǎn)就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。