123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <template>
- <view class="container">
- <tab-control ref="tabControl" :active='opentabControl' />
- <home ref="Home" v-show="PageCur == 'Home'" />
- <my-map ref="Map" 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 myMap from "./modules/my-map.vue";
- import message from "./modules/message.vue";
- import mine from "./modules/mine.vue";
- import tabControl from "../../components/bottomTabControl.vue";
- export default {
- components: { home, myMap, message, mine, tabControl },
- data() {
- return {
- PageCur: "Home",
- }
- },
- 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>
|