江苏龙网

  1. 主页 > 生活百科 > >

apk 一文带你使用Vue完成移动端项目( 二 )

vue


watch: {
$route (to, from) {
if (this.Showlist.includes(to.name)) {
this.isShowNav = true
} else if (to.name === '') {
this.isShowNav = false
} else {
this.isShowNav = false
}
}
}
}
</script>
<style>
#app {
width: 100%;
height: 100%;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
html,
body {
width: 100%;
height: 100%;
}
</style>
首页
首页
头部搜索栏
主体
使用的是Vant组件的search组件
官网介绍
这一块都是对应的下面每个模块内容都是嵌套在里面的
tab
优选模块
轮播图
我们在data中定义了轮播图所需要的图片变量images 我们在这循环输出即可
轮播图的图片我是写死的 ， 有需要可以自己去获取一下哦
十宫格
秒杀
获取一天的倒计时
然后在created函数中调用
商品
请求接口获取所有商品信息（也需要在created函数中调用哦）
其他模块都是类似的
完整代码：

<template>
<div class="home">
<div class="header">
<van-search
v-model="value"
show-action
shape="round"
background="#890bf2"
placeholder="请输入搜索关键词"
@search="search"
>
<template #action>
<i
class="iconfont icon-xiaoxi"
style="font-size: 30px; color: white"
></i>
</template>
</van-search>
<van-tabs
v-model="actives"
background="#890bf2"
title-inactive-color="white"
title-active-color="white"
color="#fff"
>
<van-tab title="优选" :width="500">
<!-- 轮播图 -->
<van-swipe :autoplay="3000" class="my-swipe1">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" />
</van-swipe-item>
</van-swipe>
<!-- 十宫格部分 -->
<van-grid :column-num="5">
<van-grid-item v-for="value in gird" :key="value.id">
<div @click="xxx(value.name)">
<i :class="value.icon" style="font-size: 35px; color: red"> </i>
</div>
<b style="font-size: 16px">{{ value.name }}</b>
</van-grid-item>
</van-grid>
<!-- 秒杀部分 -->
<div class="supply">
<div class="seckill">
<van-count-down :time="time" style="font-size: 14px; color: red">
<template #default="timeData">
<span>距离秒杀结束时间：</span>
<span class="block">{{ timeData.hours }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.minutes }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.seconds }}</span>
</template>
</van-count-down>
</div>
<div class="shop">
<ul>
<li
v-for="item in supplyShop"
:key="item.id"
@click="detailshop(item.id)"
>
<img :src=https://www.isolves.com/it/cxkf/bk/2021-06-16/"item.shop_img" />
</li>
</ul>
</div>
</div>
<!-- 商品 -->
<div class="otherShop">
<ul>
<li
v-for="item in otherShop"
:key="item.id"
@click="detailshop(item.id)"
>
<a href="JAVAScript:;"><img :src="item.shop_img" alt="" /></a>
<a href="JavaScript:;" style="color: #000"
><p>
{{ item.shop_title }}
</p></a
>
</li>
</ul>
</div>
</van-tab>
<van-tab title="手机">
<van-grid :column-num="4">
<van-grid-item
v-for="value in phoneimg"
:key="value.id"
icon="photo-o"
text="文字"
>
<img :src=https://www.isolves.com/it/cxkf/bk/2021-06-16/"value.src" style="width: 50px; height: 30px" />


推荐阅读


上一篇：前端、后端、全栈都是干嘛的？哪个薪资高？

下一篇：普通人使用搜索引擎VS黑客使用搜索引擎