滚动条的数据从后台得到的办法(后台提供接口)
图片列表懒加载的设置(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>