vue移动端开发 vant框架使用 ImagePreview 之 图片预览 放大
1.HTML部分<div class="block" @click="open(index)"><div class="img"v-if="bottomData.length>0"><img...
·
1.HTML部分
<div class="block" @click="open(index)">
<div class="img" v-if="bottomData.length>0">
<img
style="margin-left:0.5rem;"
:key="index"
v-for="(a,index) in item.imgUrl"
width="80rem;"
height="80rem;"
:src="a"
alt=""
/>
</div>
</div>
</div>
js部分
data是下标,显示对应的图片,
startPosition 图片预览起始位置索引 给0 显示图片的页数
//图片放大
open(data){
console.log(data,"555")
let that=this
console.log(that.bottomData[data].imgUrl,"--------")
// this.bottomData.
ImagePreview({
// images:this.newImgUrl,
images:that.bottomData[data].imgUrl,
startPosition:0,
})
},
注意一定调成手机模式,不然滑动不了.切换不了图片
返回数据格式 ,是数组,如果不是,自己处理成数组
如果用的额地方比较多,就main.js中引入,如果少,就当前页面引入
import { ImagePreview } from 'vant';
更多推荐
已为社区贡献5条内容
所有评论(0)