微信小程序自定义底部导航 - 好文

<view class='footer'> <view class='footer_list' 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.title}}</view>
</view> </view> /*自定义底部导航 */ .footer { height:110rpx; width:100%; position:
fixed; bottom:0; left:0; border-top:1px solid #ddd; } .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; } /*底部导航 */ page({ data:{ curIdx: 0, listInfo: [ { title:
'首页', imgUrl: '/image/index.png', curUrl: '/image/index_active.png', }, {
title: '兼职入口', imgUrl: '/image/market.png', curUrl: '/image/market_active.png',
}, { title: '个人中心', imgUrl: '/image/my.png', curUrl: '/image/my_active.png', },
] }, chooseImg: function (e) { this.setData({ curIdx:
e.currentTarget.dataset.current }) // console.log(e) //
console.log(this.data.curIdx) }, })

热门工具换一换