微信小程序自定义底部导航带跳转功能
2018-12-03 09:26
1276 查看
本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下
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) }, // 底部导航结束 })
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序自定义底部导航带跳转功能
- 微信小程序自定义导航隐藏和显示功能
- 微信小程序系列十:自定义底部导航
- 微信小程序实现底部导航栏目示例
- 微信小程序tabBar底部导航中文注解api
- 微信小程序—tabBar底部导航中文注解api
- 微信小程序弹出自定义模态框,禁止底部页面滚动事件
- 微信小程序把玩(三)tabBar底部导航
- 微信小程序自定义导航栏 navigation bar 返回键 首页
- 微信小程序底部导航加顶部table选项卡
- 微信小程序自定义底部弹出框
- 微信小程序自定义组件实现tabs选项卡功能
- 微信小程序 底部导航栏目开发资料
- 微信小程序—tabBar底部导航中文注解api
- 微信小程序之四(设置底部导航)
- 微信小程序中进行地图导航功能的实现方法
- 微信小程序自定义底部弹出框
- 微信小程序自定义关键词功能关闭