You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.2 KiB
108 lines
2.2 KiB
<template> |
|
<view class="wrap"> |
|
<!-- 吸顶 --> |
|
<u-sticky bgColor="#fff"> |
|
<!-- 搜索 --> |
|
<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> |
|
<!-- 筛选 --> |
|
<view class=""> |
|
筛选 |
|
</view> |
|
</u-sticky> |
|
|
|
<!-- 列表 --> |
|
<view class="list"> |
|
<u-list @scrolltolower="scrolltolower"> |
|
<u-list-item v-for="(item, index) in indexList" :key="index" @tap="toInfo"> |
|
<u-cell :title="`列表长度-${index + 1}`"> |
|
<u-avatar slot="icon" shape="square" size="35" :src="item.url" |
|
customStyle="margin: -3px 5px -3px 0"></u-avatar> |
|
</u-cell> |
|
</u-list-item> |
|
</u-list> |
|
</view> |
|
<!-- <view class="list"> |
|
<view class="item" v-for="(item, index) in list" :key="index"> |
|
{{'第' + item + '条数据'}} |
|
</view> |
|
|
|
<u-loadmore :status="status" /> |
|
</view> --> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
// 搜索 |
|
keyword: '遥看瀑布挂前川', |
|
// 筛选 |
|
|
|
// 列表 |
|
indexList: [], |
|
urls: [ |
|
"https://xxx.com/album/1.jpg", |
|
"https://xxx.com/album/2.jpg", |
|
"https://xxx.com/album/3.jpg", |
|
"https://xxx.com/album/4.jpg", |
|
"https://xxx.com/album/5.jpg", |
|
"https://xxx.com/album/6.jpg", |
|
"https://xxx.com/album/7.jpg", |
|
"https://xxx.com/album/8.jpg", |
|
"https://xxx.com/album/9.jpg", |
|
"https://xxx.com/album/10.jpg", |
|
], |
|
// 加载更多 |
|
status: 'loadmore', |
|
list: 15, |
|
page: 0 |
|
}; |
|
}, |
|
onLoad() { |
|
this.loadmore(); |
|
}, |
|
methods: { |
|
toInfo() { |
|
uni.$u.route('/pages/ent/info'); |
|
}, |
|
scrolltolower() { |
|
this.loadmore(); |
|
}, |
|
loadmore() { |
|
for (let i = 0; i < 30; i++) { |
|
this.indexList.push({ |
|
url: this.urls[uni.$u.random(0, this.urls.length - 1)], |
|
}); |
|
} |
|
}, |
|
}, |
|
// 触底 |
|
// onReachBottom() { |
|
// if (this.page >= 3) return; |
|
// this.status = 'loading'; |
|
// this.page = ++this.page; |
|
// setTimeout(() => { |
|
// this.list += 10; |
|
// if (this.page >= 3) this.status = 'nomore'; |
|
// else this.status = 'loading'; |
|
// }, 2000) |
|
// }, |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.wrap { |
|
background-color: #F9F9F9; |
|
min-height: 100vh; |
|
|
|
|
|
|
|
.list { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 24rpx; |
|
padding: 24rpx; |
|
} |
|
} |
|
</style> |