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
2 months ago
|
<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>
|