konggang-city-miniprogram/components/foot-tabs/footTabs.vue

<template>
  <div class="hover_content">
    <div class="hover_menu flex">
      <div
        class="menu_icon"
        v-for="(menu, i) in menus"
        :key="i"
        @tap="click(i, menu.pagePath)"
      >
        <!-- <uni-transition mode-class="fade" show="true" v-if="selectedIndex == i"> -->
          <!-- <img :src="menu.selectedIconPath" /> -->
		  <image class="tabbar-list-li-icon-image" :src="selectedIndex == i ? menu.selectedIconPath : menu.iconPath" mode=""></image>
       <!-- </uni-transition> -->
<!--        <uni-transition mode-class="fade" show="true" v-else>
          <img :src="menu.iconPath" />
        </uni-transition> -->
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.hover_content {
  z-index: 999;
  width: 30%;
  padding: 1.5% 1%;
  border-radius: 100rpx;
  position: fixed;
  left: 50%;
  top: 90%;
  transform: translateX(-50%);
  box-shadow: rgba(100, 100, 111, 0.2) 0rpx 7rpx 29rpx 0rpx;
  background-color: #fff;
  .hover_menu {
    display: flex;
    justify-content: space-around;
	margin-top: 10rpx;
    .menu_icon {
      transition: all 0.5s;
      image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 100rpx;
      }
    }
  }
}
</style>
<script>
export default {
	props: ['selectedIndex'],
	data() {
    return {
      // selectedIndex: 0,
      // showselected: false,
      menus: [
        {
          pagePath: "/pages/index/index",
          iconPath: "/static/tabbar/home-select.png",
          selectedIconPath: "/static/tabbar/home-selected.png",
          text: "Ê×Ò³",
        },
        {
          pagePath: "/pages/selfCenter/index",
          iconPath: "/static/tabbar/user-select.png",
          selectedIconPath: "/static/tabbar/user-selected.png",
          text: "ÎÒµÄ",
        },
      ],
    };
  },
  methods: {
    click(index, src) {
  //    let that = this;		
  //    that.selectedIndex = index
  //    getApp().globalData.selectedIndex = index 
  //     if (index == 0) {
		// that.isSider = false;
		// getApp().globalData.isSider = false;
  //     } else {
		// that.isSider = true;
		// getApp().globalData.isSider = true;
  //     }
	  uni.switchTab({
	  	url:src,
	  })
	 // var pages = getCurrentPages();
	 // uni.navigateTo({
		// url: "/" + src,
		// // animationType: 'pop-in',
		// // animationDuration: 200
	 // });
	 // if(pages.length > 9){
		//  uni.reLaunch({
		// 	url: "/" + src,
		//  });
	 // }
    },
  },
};
</script>