vue项目3

该博客介绍了如何在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,才能完全显示懒加载组件性能
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

  1. 首先要安装插件

    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> 

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值