Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：vant简单使用
目录
Vant组件
有赞技术团队推出的Vue移动端框架
移动端框架：vant
中文官网 Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.
安装
通过npm安装
在现有项目中使用vant时，可以通过npm或者yarn进行安装。
npm安装命令
# Vue 2项目，安装Vant 2
npm i vant@latest-v2
# Vue 3项目，安装Vant 3
npm i vant修改入口
修改回移动端入口
在main.js中把PC端入口改为App.vue。
示例如下：
引入组件
手动引入组件
在不使用插件的情况下，可以手动引入需要的组件。
导入所有组件
Vant支持一次性导入所有组件爱你，引入所有组件会增加代码包体积，
因此不推荐这种做法。
Vant应用
顶部标题
在app.vue中引入Vant后，然后在CinemasView.vue中使用Vant增加搜索框。
示例如下：
<template>
<div>
<van-nav-bar title="影院">
<template #left>
北京<van-icon name="arrow-down"/>
</template>
<template #right>
<van-icon name="search" size="18" color="black" />
</template>
</van-nav-bar>
<div class="box" :style="{height: height}">
<ul>
<li v-for="data in cinemaList" :key="data.cinemaId">
<div class="left">
<div class="cinema_name">{{data.name}}</div>
<div class="cinema_text">{{data.address}}</div>
</div>
<div class="right cinema_name">
<div style="color:red">￥ {{data.lowPrice / 100}} 起</div>
</div>
</li>
</ul>
</div>
</div>
</template>页面高度计算修改
首先绑定ref
然后动态计算时减去顶部标题的高度
图片预览
使用函数调用 ImagePreview是一个函数，调用函数后会直接在页面中展示图片预览界面。
预览一张
应用在点击详情：剧照点击查看图片：首先图片绑定事件。
设置绑定事件
components: {
detailSwiper,
detailSwiperItem,
detailHeader
},
methods: {
handlePreview () {
ImagePreview(['https://pic.maizuo.com/usr/movie/713548d3d3880fb3962bbf248c1852fd.jpeg'])
}
},预览所有
使用动态传值，预览所有照片。
methods: {
handlePreview () {
ImagePreview(this.filmInfo.photos)
}
},预览初始位置
ImagePreview支持传入配置对象，
并通过 startPosition 选项指定图片的初始位置（索引值）
绑定事件时，传递索引
接收index，设定初始位置
methods: {
handlePreview (index) {
ImagePreview({
image: this.filmInfo.photos,
startPosition: index
})
}
}关闭按钮
设置是否显示关闭按钮，示例如下：
ImagePreview({
image: this.filmInfo.photos,
startPosition: index,
closeable: true
})总结
Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：vant简单使用