微信小程序自定义底部导航带跳转

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



 

• « 上一篇：Android2018年最新前沿框架和技术
• » 下一篇：NumPy常用函数（1）-- 将NumPy数组保存成文本文件，并装载数组文件