city-gather/src/subPack-attractions/commonTab/index.vue

<script setup lang="ts">
import homeList from './components/homeList.vue'
import orderList from './components/orderList.vue'

const tabbar = ref(0)
const { opcity } = storeToRefs(useSysStore())

definePage({
  name: 'attractions-tabbar',
  islogin: false,
  style: {
    navigationBarTitleText: '',
    navigationStyle: 'custom',
  },
})
onLoad((options: any) => {
  if (options.tabbar) {
    tabbar.value = Number(options.tabbar)
  }
})
// 页面级滚动监听 - 必须在页面组件中才能生效
onPageScroll((e) => {
  if (tabbar.value === 0) {
    const calculatedOpacity = e.scrollTop / 100
    opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
  }
})
</script>

<template>
  <view class="">
    <home-list v-if="tabbar === 0" />
    <order-list v-if="tabbar === 1" />
    <view class="">
      <wd-tabbar v-model="tabbar" safe-area-inset-bottom placeholder fixed :bordered="false" :z-index="99999">
        <wd-tabbar-item title="列表" icon="goods">
          <template #icon>
            <i class="iconfont text-44rpx" :class="[tabbar === 0 ? 'text-[var(--them-color)]' : '']">&#xe63a;</i>
          </template>
        </wd-tabbar-item>
        <wd-tabbar-item title="订单记录" icon="list">
          <template #icon>
            <i class="iconfont text-44rpx" :class="[tabbar === 1 ? 'text-[var(--them-color)]' : '']">&#xe645;</i>
          </template>
        </wd-tabbar-item>
      </wd-tabbar>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>