微信小程序瀑布流组件
<template>
<view style="display: flex;flex-direction: column;width: 100%;height: 100wh;">
<view class="ddddd">
<ZzzVue @scrolltolower="jhjj2" ref="leftright">
<template v-slot:left="{data,dataIndex}">
<image :src="data"
style="width: 100%;display: block;margin: 0;padding: 10rpx;box-sizing: border-box;"
mode="widthFix"></image>
</template>
<template v-slot:right="{data,dataIndex}">
<image :src="data"
style="width: 100%;display: block;margin: 0;padding: 10rpx;box-sizing: border-box;"
mode="widthFix"></image>
</template>
</ZzzVue>
</view>
<view @click="jhjj2()" style=" line-height: 90rpx;background: #ccc;">下一页</view>
<view @click="jhjj333()" style=" line-height: 90rpx;background: #ccc;">返回顶部</view>
</view>
</template>
<script>
import a1 from '../../static/1.jpg'
import a2 from '../../static/2.jpg'
import ZzzVue from '../Component/Compent.vue'
export default {
components: {
ZzzVue
},
data() {
return {
arrList: [a1,
a2
],
tempList: []
}
},
onLoad() {
var d = [...this.arrList];
for (let i = 0; i < 5; i++) {
this.arrList = [...this.arrList, ...d]
}
this.tempList = [...this.arrList]
this.$nextTick(() => {
this.$refs.leftright.Init(this.arrList)
})
},
methods: {
jhjj333() {
this.$nextTick(() => {
this.$refs.leftright.backTop()
})
},
jhjj2() {
this.$nextTick(() => {
this.$refs.leftright.Init(this.tempList)
})
},
}
}
</script>
<style>
.ddddd {
width: 100%;
height: 80vh;
}
</style>