vue项目3

最新推荐文章于 2025-07-13 13:34:06 发布

steve1988717

最新推荐文章于 2025-07-13 13:34:06 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/steve1988717/article/details/94585918

该博客介绍了如何在Vue项目中通过后台接口获取滚动条数据，利用Mint-UI实现图片列表的懒加载。还讨论了点击图片列表跳转到详情页及缩略图插件的使用方法，包括安装和引入vue-preview插件以实现预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滚动条的数据从后台得到的办法（后台提供接口）

在这里插入图片描述

图片列表懒加载的设置（Mint-ui）

在这里插入图片描述
使用连接说明：https://mint-ui.github.io/docs/#/zh-cn2/lazyload

然后把标签引入进来

<ul>
  <li v-for="item in list">
    ![在这里插入图片描述]()
  </li>
</ul>

在这里插入图片描述

img[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

在这里插入图片描述

注意：上图中的@click=getPhotoListByCateId 绑定的点击事件，有时真正运用到手机中，点击会不起作用，这里可以改成@tap 也是绑定点击事件，不过这个tap只能用在MUi这个插件中，其他的不可以

在这里插入图片描述
mintui的懒加载组件，需要全部导入不能不分导入mintui，才能完全显示懒加载组件性能

点击图片列表内容，跳转到图片详情内容页

在这里插入图片描述

缩略图的应用，需要用到插件

首先要安装插件

cnpm i vue-preview -S

2，然后引入安装这个插件

import VuePreview from 'vue-preview'
Vue.use(VuePreview)

在这里插入图片描述

然后引入标签代码

<template>
  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</template>
 
<script>
export default {
    data () {
      return {
        slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script>

在这里插入图片描述