返回博客列表

移动端展示页面

2026-01-29
4 min read
未分类
v-ui-pro

安装依赖 实现1抽屉 方案 1，文章在抽屉里面显示 方案2-Swiper

安装依赖

bash
pnpm add tdesign-mobile-vue

实现1-抽屉

方案 1，文章在抽屉里面显示

vue
<template>
  <div class="mo" style="color: black;">
    <Drawer
        attach=".mo"
        v-model:visible="visible" placement="right">
      <template #title>
        <Navbar title="西魏陶渊明" :fixed="false" left-arrow @left-click="visible=false"/>
      </template>
      <h1>Hello</h1>
      <Empty image="https://tdesign.gtimg.com/mobile/demos/empty1.png" description="描述文字"/>
    </Drawer>
    <div class="header"
         style="opacity: 1;position: fixed; height: 6rem;overflow: hidden;top: 0;width: 100%;display: flex;flex-direction: column">
      <Navbar :fixed="false">
        <template #left>
          <Search :placeholder="currentValue" shape="round"/>
        </template>
        <template #right>
          <icon-home/>
        </template>
      </Navbar>
      <Tabs :value="currentValue" size="medium" :space-evenly="false" :list="tabList" @change="onChange">
      </Tabs>
    </div>
    <div class="content"
         style="margin: 6.1rem 0 4rem 0;height: calc(100vh - 6.1rem - 4rem);overflow-y: scroll">
      <div class="blog-card" v-for="blog in 10" :key="blog" @click="toPostAction">
        <div style="width: 100%;display: flex;gap:1rem;align-items: center">
          <Skeleton style="flex: 1" theme="paragraph" :row-col="rowCols" :loading="loading"></Skeleton>
          <Skeleton theme="paragraph" :loading="loading" style="flex: 1;height: 100%"></Skeleton>
        </div>
      </div>
    </div>
    <div class="footer" style="opacity: 1;position: fixed;bottom: 0;width: 100%;height: 4rem;">
      <TabBar v-model="value" theme="tag" :split="false">
        <TabBarItem v-for="item in list" :key="item.value" :value="item.value">
          {{ item.label }}
        </TabBarItem>
      </TabBar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {TabBar, TabBarItem, Navbar, Search, Tabs, Skeleton, Drawer, Empty} from 'tdesign-mobile-vue'
// 引入组件库的少量全局样式变量
import 'tdesign-mobile-vue/es/style/index.css';
import {ref} from 'vue'

const viewCode = ref('home2')

const visible = ref(false);

const toPostAction = () => {
  visible.value = true;
}

const value = ref('home');
const list = ref([
  {value: 'home', label: '前端'},
  {value: 'app', label: '后端'},
  {value: 'chat', label: '数据'},
  {value: 'user', label: 'AI'},
  {value: 'us2er', label: '随笔'},
]);

const tabList = ref([
  {
    label: '关注',
    value: '1',
  },
  {
    label: 'Css',
    value: '2',
  },
  {
    label: 'Javascript',
    value: '3',
  },
  {
    label: 'Monnrepo',
    value: '4',
  },
  {
    label: 'Guide',
    value: '5',
  },
  {
    label: 'Tavascript',
    value: '6',
  },
  {
    label: 'Uniapp',
    value: '7',
  },
  {
    label: 'Vitepress',
    value: '8',
  },
  {
    label: 'Vue',
    value: '9',
  },
  {
    label: 'V-ui-pro',
    value: '10',
  },
  {
    label: '体育',
    value: '11',
  },
  {
    label: '财经',
    value: '12',
  },
  {
    label: '国际',
    value: '13',
  },
  {
    label: '时尚',
    value: '14',
  },
  {
    label: '房产',
    value: '15',
  },
])

const loading = ref(true);

const rowCols = [{size: '163.5px', borderRadius: '12px'}];

const currentValue = ref('1');

const onChange = (value: any, lebal: string) => {
  currentValue.value = value;
  console.log(`change to ${value}`);
};
</script>

<style lang="less" scoped>
.mo {
  --td-drawer-width: 420px;
}

.search {
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
}

.search :deep(.arco-input-wrapper),
.search :deep(.arco-input-group-wrapper) {
  border-radius: 999px !important;
  background-color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.blog-card {
  padding: 1rem;
  background-color: white;
  border-radius: .2rem;
  margin-bottom: .5rem;
}
</style>

方案2-Swiper

vue
<template>
  <div class="mo" style="color: black;">
    <Swiper v-model:current="current" :autoplay="false" @click="handleClick" @change="handleChange">
      <SwiperItem style="height: 100vh">
        <div class="header"
             style="opacity: 1;position: fixed; height: 6rem;overflow: hidden;top: 0;width: 100%;display: flex;flex-direction: column">
          <Navbar :fixed="false">
            <template #left>
              <Search :placeholder="currentValue" shape="round"/>
            </template>
            <template #right>
              <icon-home/>
            </template>
          </Navbar>
          <Tabs :value="currentValue" size="medium" :space-evenly="false" :list="tabList" @change="onChange">
          </Tabs>
        </div>
        <div class="content"
             style="margin: 6.1rem 0 4rem 0;height: calc(100vh - 6.1rem - 4rem);overflow-y: scroll">
          <div class="blog-card" v-for="blog in 10" :key="blog" @click="toPostAction">
            <div style="width: 100%;display: flex;gap:1rem;align-items: center">
              <Skeleton style="flex: 1" theme="paragraph" :row-col="rowCols" :loading="loading"></Skeleton>
              <Skeleton theme="paragraph" :loading="loading" style="flex: 1;height: 100%"></Skeleton>
            </div>
          </div>
        </div>
        <div class="footer" style="opacity: 1;position: fixed;bottom: 0;width: 100%;height: 4rem;">
          <TabBar v-model="value" theme="tag" :split="false">
            <TabBarItem v-for="item in list" :key="item.value" :value="item.value">
              {{ item.label }}
            </TabBarItem>
          </TabBar>
        </div>
      </SwiperItem>
      <SwiperItem style="height: 100vh">
        <Navbar title="西魏陶渊明" fixed left-arrow @left-click="goHome"/>
      </SwiperItem>
      <SwiperItem style="height: 100vh">
        <h1>H3</h1>
      </SwiperItem>
    </Swiper>
  </div>
</template>

<script lang="ts" setup>
import {TabBar, TabBarItem, Navbar, Search, Tabs, Skeleton, Drawer, Empty, Swiper, SwiperItem} from 'tdesign-mobile-vue'
// 引入组件库的少量全局样式变量
import 'tdesign-mobile-vue/es/style/index.css';
import {ref} from 'vue'

const current = ref(0)

const handleChange = (index: number, context: any) => {
  console.log('基础示例,页数变化到》》》', index, context);
};

const handleClick = (value: number) => {
  console.log('click: ', value);
};

const goHome = () => {
  current.value = 0;
  console.log('current: ', current.value)
}

const toPostAction = () => {
  current.value = 1;
}

const value = ref('home');
const list = ref([
  {value: 'home', label: '前端'},
  {value: 'app', label: '后端'},
  {value: 'chat', label: '数据'},
  {value: 'user', label: 'AI'},
  {value: 'us2er', label: '随笔'},
]);

const tabList = ref([
  {
    label: '关注',
    value: '1',
  },
  {
    label: 'Css',
    value: '2',
  },
  {
    label: 'Javascript',
    value: '3',
  },
  {
    label: 'Monnrepo',
    value: '4',
  },
  {
    label: 'Guide',
    value: '5',
  },
  {
    label: 'Tavascript',
    value: '6',
  },
  {
    label: 'Uniapp',
    value: '7',
  },
  {
    label: 'Vitepress',
    value: '8',
  },
  {
    label: 'Vue',
    value: '9',
  },
  {
    label: 'V-ui-pro',
    value: '10',
  },
  {
    label: '体育',
    value: '11',
  },
  {
    label: '财经',
    value: '12',
  },
  {
    label: '国际',
    value: '13',
  },
  {
    label: '时尚',
    value: '14',
  },
  {
    label: '房产',
    value: '15',
  },
])

const loading = ref(true);

const rowCols = [{size: '163.5px', borderRadius: '12px'}];

const currentValue = ref('1');

const onChange = (value: any, lebal: string) => {
  currentValue.value = value;
  console.log(`change to ${value}`);
};
</script>

<style lang="less" scoped>
.mo {
  --td-drawer-width: 420px;
}

.search {
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
}

.search :deep(.arco-input-wrapper),
.search :deep(.arco-input-group-wrapper) {
  border-radius: 999px !important;
  background-color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.blog-card {
  padding: 1rem;
  background-color: white;
  border-radius: .2rem;
  margin-bottom: .5rem;
}
</style>
返回博客列表
最后更新于 2026-01-29
想法或问题？在 GitHub Issue 下方参与讨论
去评论