123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- <template>
- <view class="container">
- <tab-control ref="tabControl" :active="opentabControl" />
- <home ref="Home" v-show="PageCur == 'Home'" />
- <facility ref="Map" :tabHeight="tabHeight" v-show="PageCur == 'Map'" />
- <message ref="Message" v-show="PageCur == 'Message'" />
- <mine ref="Mine" v-show="PageCur == 'Mine'" />
- <view class="cu-bar tabbar bg-white foot" style="z-index: 100000">
- <!-- bg-black -->
- <view
- @click="changePage('Home')"
- :class="
- PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'
- "
- >
- <view
- class="iconfont"
- :class="
- PageCur == 'Home'
- ? 'icon-shouye-xuanzhong'
- : 'icon-shouye-weixuanzhong'
- "
- />
- 首页
- </view>
- <view
- @click="changePage('Map')"
- :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'"
- >
- <view
- class="iconfont"
- :class="
- PageCur == 'Map' ? 'icon-ditu-xuanzhong' : 'icon-ditu-weixuanzhong'
- "
- />
- 地图
- </view>
- <view class="text-gray" @click.stop="opentabControl(true)">
- <button
- class="cu-btn cuIcon-add shadow more"
- style="background-color: #0b3f7e; color: #fff"
- ></button>
- </view>
- <view
- @click="changePage('Message')"
- :class="
- PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'
- "
- >
- <view
- class="iconfont"
- :class="
- PageCur == 'Message'
- ? 'icon-xiaoxi-xuanzhong'
- : 'icon-xiaoxi-weixuanzhong'
- "
- >
- <!-- <view class="cu-tag badge">99</view> -->
- </view>
- 消息
- </view>
- <view
- @click="changePage('Mine')"
- :class="
- PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'
- "
- >
- <view
- class="iconfont"
- :class="
- PageCur == 'Mine' ? 'icon-wode-xuanzhong' : 'icon-wode-weixuanzhong'
- "
- />
- 我的
- </view>
- </view>
- </view>
- </template>
- <script>
- import home from "./modules/home.vue";
- import facility from "../facility/index.vue";
- import message from "./modules/message.vue";
- import mine from "./modules/mine.vue";
- import tabControl from "./modules/bottomTabControl.vue";
- export default {
- components: { home, facility, message, mine, tabControl },
- data() {
- return {
- PageCur: "Home",
- tabHeight: 98,
- };
- },
- mounted() {
- this.getHeight(".cu-bar", this, false).then((res) => {
- this.tabHeight = res.height;
- });
- this.loadElement();
- },
- onShow() {
- this.$refs.Home.renderData();
- },
- methods: {
- opentabControl(active) {
- if (this.$refs.tabControl.active !== active)
- this.$nextTick(() => (this.$refs.tabControl.active = active));
- },
- changePage(page) {
- this.PageCur = page;
- this.opentabControl(false);
- this.loadElement();
- },
- loadElement(forcedUpdating) {
- let page = this.$refs[this.PageCur];
- if (page.uninitialized || forcedUpdating) page.init();
- },
- },
- };
- </script>
- <style lang="scss" scoped></style>
|