Used based on vue3 and ts platforms
This article will teach you step by step how to use vant to develop h5
introduce
Vant is a lightweight and reliablemobile component library, based on Vue3, developed by Like the development and maintenance. In the early days, Youzan built the WeChat ecosystem with H5 mall and mini programs mall Since its inception, Vant has always been the main component of these products. It has been maintained by Youzan's technical team and is very reliable.
Next, I will teach you how to use vant4
1, installation
npm i vant
Just install the latest version
2.Register
2.1, partial registration
Register separately within the component
import { Button } from 'vant'; //引入组件
import 'vant/lib/index.css'; //引入样式
import { onMounted, ref } from "vue"
export default ({
setup() {
return {}
},
components: {
vanButton: Button, //注册组件
},
})
2.2, global registration
Register the component globally in main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import vant from "vant" //1.引入vant
import 'vant/lib/index.css'; //2。引入vant样式
createApp(App).use(store).use(router).use(ElementPlus).use(vant).mount('#app') //3、链式调用use方法，将vant传入，完成全局注册，这里我直接省事，注册了所有的vant组件，
按需注册
import {Button} from "vant"
createApp(App).use(store).use(router).use(ElementPlus).use(Button).mount('#app')Recommended on demand.
3. Define tabbat tab bar
3.1 Define 3 components in the router as the basic components for our bottom navigation bar switching. At the same time, we define a main component to accommodate the defined basic components.
3.2 Define the content we want to display in the component
<template>
<div>
我是commodity组件
</div>
</template>
<script lang="ts">
export default ({
setup() {
return {}
}
})
</script>
<style scoped>
</style>
3.3 Register routing and bind components and routing
const routes: Array<RouteRecordRaw> = [
{
path:"/",
name:"host",
redirect:"/home",
component:()=>import("../views/IndexHost.vue"),
children:[
{
path: '/home',
name: 'home',
component: () => import("../views/home/IndexHome.vue")
},
{
path: '/user',
name: 'user',
component: () => import('../views/user/IndexUser.vue')
},
{
path: '/commodity',
name: 'commodity',
component: () => import('../views/commodity/IndexCommodity.vue')
},
]
},
] 3.4, define the tabber label (bottom label) and define the routing container in the main component (IndexHost.vue)
<template>
<div>
<router-view /> //1.定义路由容器，显示在上层
<div>
<van-tabbar v-model="active">
<van-tabbar-item name="home" icon="home-o" @click="cuttab('home')" replace to="/home">首页</van-tabbar-item> //2.定义底部tab，通过actuve属性的来确定当前选中的是哪个tab，replacr为true，表示在当前页面跳转，to属性表示点击时跳转到这个路由
<van-tabbar-item name="search" icon="search" @click="cuttab('search')" replace to="/commodity">商品</van-tabbar-item>
<van-tabbar-item name="friends" icon="friends-o" @click="cuttab('friends')" replace to="/user">用户</van-tabbar-item>
</van-tabbar>
</div>
</div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default ({
setup() {
const active = ref('home');
const cuttab=(name:string)=>{ //3.定义方法，当点击tab时传入name，用name来替换avtive的值，实现点击时切换tab的交互
active.value = name
}
return {
active,
cuttab
}
}
})
</script>
<style scoped></style>
achieve effect
4. Fill the home page with content
Find our home page component IndexHome.vue and write the page code and logic of the home page in it.
4.1 Implement lazy loading carousel images at the top of the homepage.
Here we use local pictures, create a new img folder in the vue project components, and put the pictures that need to be carousel displayed in it
Use the carousel component to implement lazy loading and cyclic playback of local images
<template>
<div>
<div class="topimg">
<van-swipe :autoplay="3000" lazy-render height="150"> //3.autoplay是轮播间隔时间，height是轮播图在页面上占用的高度
<van-swipe-item v-for="image in images" :key="image"> //4.图片组循环
<img :src="image"/> //5.一次放入img标签渲染
</van-swipe-item>
</van-swipe>
</div>
</div>
</template>
<script lang="ts">
import a1 from "@/components/imgs/a1.jpg" //1.导入图片
import a2 from "@/components/imgs/a2.jpg"
export default ({
setup() {
const images = [ //2.将图片放入在images里面，供上方循环调用
a1,a2
];
return {
images
}
}
})
</script>
<style scoped >
.topimg img{
width:100%;
height:150px;
}
</style>
Renderings
4.2 Access the echarts chart
Create a new component in the homepage component to store the echarts chart component
The specific code is as follows
<template>
<div>
<div ref="box" style="height:500px">
</div>
</div>
</template>
<script lang="ts">
import { ref } from "vue"
import * as echarts from "echarts"
import { onMounted } from "vue"
export default ({
setup() {
const box = ref()
const fns = () => {
console.log(box.value)
var myChart = echarts.init(box.value);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
}
onMounted(fns)
return {
box
}
}
})
</script>
<style></style>Introduced in the parent component
Effect
I’m so sleepy that I can’t write anymore. I don’t even know what I wrote.