Posted in Javascript onNovember 27, 2018
本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下
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) }, // 底部导航结束 })
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
微信小程序自定义底部导航带跳转功能
- Author -
焕想声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@