怎么用wordpress搭建免费网站千图网的设计风格
Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：vant简单使用
目录
Vant组件
安装
修改入口
修改回移动端入口
引入组件
手动引入组件
导入所有组件
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简单使用