小程序tarbar自定义组件

第一步：建立一个文件夹里面放置组件（tabbar为组件）

第二步编辑：

wxml：

<view class='allfooter'>

<view class='footer-one'>

<view class='foot-img' bindtap='change1'>

<image src='{{tarbar.shouye.active?"照片1":"照片2"}}'></image>

<text>首页</text>

</view>

<view class='foot-img' bindtap='change2'>

<image src='{{tarbar.shanghu.active?"照片1":"照片2"}}'></image>

<text>商户</text>

</view>

<view class='foot-img'>

<image src='中间的照片' bindtap='dowhat'></image>

</view>

<view class='foot-img' bindtap='change3'>

<image src='"照片1":"照片2"}}'></image>

<text>停车</text>

</view>

<view class='foot-img' bindtap='change4'>

<image src='{{tarbar.wode.active?"照片1":"照片2"}'></image>

<text>我的</text>

</view>

</view>

<view class='footer-two' wx:if ="{{show}}"></view>

</view>

 

wxss：

.allfooter{

width: 100%;

position: fixed;

bottom: 0;

left: 0;

}

.allfooter .footer-one{

width: 100%;

height: 10vh;

}

.allfooter .footer-two{

width: 100%;

height: 60rpx;

}

.allfooter .footer-one .foot-img{

width: 20%;

height: 10vh;

float: left;

text-align: center;

position: relative

 

}

.allfooter .footer-one .foot-img image{

width: 44rpx;

height: 44rpx;

margin-top: 20rpx;

}

.allfooter .footer-one .foot-img text{

font-size:24rpx;

display: block

}

.allfooter .footer-one .foot-img:nth-child(3) image{

width: 150rpx;

height: 150rpx;

position: absolute;

left: 0;

right: 0;

bottom: 30rpx;

margin:auto;

}

 

js:

Component({

/**

* 组件的属性列表

*/

properties: {

 

},

 

/**

* 组件的初始数据

*/

data: {

        tarbar:{

                   shouye:{

                                 name:"pages/index/index",

                                 active:false

                   },

                  shanghu: {

                              name: "pages/logs/logs",

                              active: false

                  },

                  tingche: {

                               name: "",

                              active: false

                   },

                 wode: {

                           name: "",

                           active: false

                           }

            }

},

 

/**

* 组件的方法列表

*/

methods: {

               //点击跳转

              change1(){

                             wx.redirectTo({

                                         url: "/"+this.data.tarbar.shouye.name,

                              })

               },

},

 

ready(){

               var that =this

               //获取当前页面

               console.log(getCurrentPages()[0].route)

               for (var x in this.data.tarbar) {

                           console.log(this.data.tarbar[x])

                           if (this.data.tarbar[x].name == getCurrentPages()[0].route) {

                                  var param = this.data.tarbar

                                  param[x].active = true

                                  this.setData({

                                          tarbar: param

                                  })

                         }

                     }

               }

            })

 

第三步 ：全局配置（在app.json中）

第四步：使用

   在需要使用的wxml中添加    <tabbar></tabbar> 标签