<template>
<view style="width: 100%;height: 100vh;">
<!-- <list style="height: 1000rpx;width: 750rpx;"> -->
<waterfall style="height: 1000rpx;width: 750rpx;" column-count="2" column-width="auto">
<refresh class="flex-row align-center justify-center mb-3" style="height: 80rpx;width: 750rpx;" @refresh="refresh" @pullingdown="pullingdown" :display="refreshing">
<text>{{text}}</text>
</refresh>
<cell>
<view style="height: 200rpx;">这个地方是一个占位</view>
</cell>
<header>
<view style="height: 200rpx;" class="bg-dark">这个地方是 吸顶</view>
</header>
<cell v-for="(item,index) in list" :key="index" :ref="'item'+index" insert-animation="default" delete-animation="default">
<view @click="goDetail" style="width: 50%;" class="bg-primary p-2 mb-2" >
<image :src="item.cover" ></image>
<text>{{item.name}}</text>
<text>{{item.content}}</text>
</view>
</cell>
<loading @loading="onLoading"
:display="loadingShow"><text>dddd</text></loading>
</waterfall>
<!-- </list> -->
</view> </template>
<script>
export default {
data() {
return {
list:[],
refreshing:'hide',
loadingShow:'hide',
text:'下拉释放刷新...',
loadtext:'上拉加载更多...'
}
},
mounted() {
for(let i=0;i<60;i++){
this.list.push({
id:i,
name:`瑶----${i}`,
content:`又帅又可爱------${i}`,
cover:`/static/images/demo/demo${i+1}.jpg`
})
}
},
methods: {
// topBottom(){
// this.$nextTick(()=>{
// let index=this.list.length-1;
// let ref='item'+index;
// if(this.$refs[ref]){
// dom.scrollToElement(this.$refs[ref][0], {})
// }
// })
// },
//下拉
refresh(){
this.refreshing='show'
this.text='正在刷新...'
setTimeout(()=>{
this.refreshing='hide'
this.text='下拉释放刷新...'
},1000)
},
pullingdown(e){
this.text=e.pullingDistance>e.viewHeight?'释放就可以刷新':'下拉释放刷新...'
},
goDetail(){
uni.navigateTo({
url:'../detail/detail'
})
},
onLoading(e){
this.loadingShow = 'show';
setTimeout(()=>{
this.loadingShow = 'hide';
},1000)
}
},
onUnload() {
}
} </script>
<style>
</style>
