vue3 瀑布流 vue-masonry使用方法
npm install vue-masonry --save
main.js文件中引入
import { VueMasonryPlugin } from "vue-masonry";
app.use(VueMasonryPlugin)
在页面中使用
<div v-masonry transition-duration="0.3s" item-selector=".item" :gutter="10" > <div v-masonry-tile class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)" > <!-- 你要渲染的图片啦,文字一类的代码块 -->
<!--这是vant组件,可以换成自己想要的代码--> <van-image width="100%" radius="12" show-loading show-error fit="cover" :src="item.imgurl" /> </div>
</div>
<style lang="scss" scoped>
.item {
width: 48%;
position: relative;
border-radius: 12px;
margin-bottom: 18px;
min-height: 80px;
.img {
width: 100%;
border-radius: 12px;
display: block;
}
}
</style>
属性:
- transition-duration:过渡的持续时间;
-
item-selector:Dom项目选择器;
-
gutter:项目元素之间的水平间距;