vant 预览图片

最新推荐文章于 2024-09-23 20:56:39 发布

cmmboy1990

最新推荐文章于 2024-09-23 20:56:39 发布

阅读量1.2k

点赞数 2

分类专栏： vant 文章标签： vue

本文链接：https://blog.csdn.net/cmmboy1990/article/details/118088045

版权

vant 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vant 预览图片

1.核心代码

<!--  -->
<template>
  <div class=''>
    <van-nav-bar title="预览png"
                 left-text="返回"
                 left-arrow
                 class="title"
                 @click-left="onClickLeft"
                 fixed
                 :placeholder="isFixedHeight"
    />
    <div v-for="(item,index) in imageLists" :key="index">
      <van-image
          width="100"
          height="100"
          :src="item"
          @click="sceneImg(imageLists,index)"
      />
    </div>

  </div>
</template>

<script>

import {ImagePreview} from "vant"; // 引入Vant图片预览组件
export default {
  name: 'Png',
  data() {

    return {
      isFixedHeight: true,
      imageLists: ['https://xx.png',
        'https://xx.jpeg'
      ]
    };
  },


  methods: {
    //返回键
    onClickLeft() {
      this.$router.go(-1)
    },
    // 图片预览
    sceneImg(images, index) {
      ImagePreview({
        images: images, //需要预览的图片 URL 数组
        showIndex: true, //是否显示页码
        loop: false, //是否开启循环播放
        startPosition: index //图片预览起始位置索引
      })
    },
  },

  created() {

  }

}
</script>
<style scoped>

</style>