下拉逻辑修改
parent
57f70d1010
commit
f49fc45272
|
|
@ -6,14 +6,16 @@
|
|||
:scroll-y="true"
|
||||
class="message-list"
|
||||
:refresher-enabled="true"
|
||||
:scroll-anchoring="true"
|
||||
refresher-background="#f5f5f5"
|
||||
:refresher-triggered="refreshing"
|
||||
:scroll-into-view="scrollId"
|
||||
:scroll-with-animation="false"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in messageList"
|
||||
:key="index"
|
||||
:id="`item${item.id}`"
|
||||
@click="gotoDevice(item)"
|
||||
class="message-item"
|
||||
>
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
<view class="champion-card">
|
||||
<view class="sender-info">
|
||||
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
|
||||
<text class="sender-text">{{ item.showTips }}</text>
|
||||
<text class="sender-text">{{ "item "+index+" " +item.id }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -47,12 +49,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Uuid from "@/tuniao-ui/libs/function/uuid";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
refreshing: false, // 下拉刷新状态(新增)
|
||||
refreshing: false, // 下拉刷新状态
|
||||
messageList: [
|
||||
{
|
||||
id: 'msg1',
|
||||
time: '2026-03-26 22:19:00',
|
||||
type: 'champion',
|
||||
avatar: 'https://picsum.photos/id/237/60/60',
|
||||
|
|
@ -60,34 +65,75 @@ export default {
|
|||
showTips: '03月26日排行榜冠军,恭喜你!'
|
||||
},
|
||||
{
|
||||
id: 'msg2',
|
||||
time: '2026-03-25 22:19:00',
|
||||
showTips: '03月25日排行榜冠军,恭喜你!'
|
||||
},
|
||||
{
|
||||
id: 'msg3',
|
||||
time: '2026-03-16 22:19:00',
|
||||
showTips: '03月25日排行榜冠军,恭喜你!'
|
||||
},
|
||||
{
|
||||
id: 'msg4',
|
||||
time: '2026-03-26 05:36:00',
|
||||
type: 'like',
|
||||
avatar: 'https://picsum.photos/id/1005/60/60',
|
||||
sender: 'JFather'
|
||||
},
|
||||
{
|
||||
id: 'msg5',
|
||||
time: '2026-03-24 22:19:00',
|
||||
type: 'step',
|
||||
rank: 160,
|
||||
steps: 1838
|
||||
},
|
||||
{
|
||||
id: 'msg6',
|
||||
time: '2026-03-27 05:36:00',
|
||||
type: 'champion',
|
||||
avatar: 'https://picsum.photos/id/1012/60/60',
|
||||
sender: 'T薛策恒',
|
||||
date: '03月24'
|
||||
},
|
||||
{
|
||||
id: 'msg7',
|
||||
time: '2026-03-28 05:36:00',
|
||||
type: 'like',
|
||||
avatar: 'https://picsum.photos/id/1013/60/60',
|
||||
sender: 'User7'
|
||||
},
|
||||
{
|
||||
id: 'msg8',
|
||||
time: '2026-03-29 05:36:00',
|
||||
type: 'champion',
|
||||
avatar: 'https://picsum.photos/id/1014/60/60',
|
||||
sender: 'User8'
|
||||
},
|
||||
{
|
||||
id: 'msg9',
|
||||
time: '2026-03-30 05:36:00',
|
||||
type: 'step',
|
||||
rank: 200,
|
||||
steps: 2000
|
||||
},
|
||||
{
|
||||
id: 'msg10',
|
||||
time: '2026-03-31 05:36:00',
|
||||
type: 'like',
|
||||
avatar: 'https://picsum.photos/id/1015/60/60',
|
||||
sender: 'User10'
|
||||
},
|
||||
{
|
||||
id: 'msg11',
|
||||
time: '2026-04-01 05:36:00',
|
||||
type: 'champion',
|
||||
avatar: 'https://picsum.photos/id/1016/60/60',
|
||||
sender: 'User11'
|
||||
}
|
||||
],
|
||||
isHaveOldData: true
|
||||
isHaveOldData: true,
|
||||
scrollId: null
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
|
@ -146,6 +192,7 @@ export default {
|
|||
setTimeout(() => {
|
||||
// 生成10条新数据
|
||||
const newData = Array.from({ length: 10 }, (_, i) => ({
|
||||
id: Uuid(16),
|
||||
time: '2026-03-27 12:00:00',
|
||||
type: 'champion',
|
||||
avatar: 'https://picsum.photos/id/999/60/60',
|
||||
|
|
@ -154,6 +201,12 @@ export default {
|
|||
}));
|
||||
// 插入到列表最前面
|
||||
this.messageList = [...newData, ...this.messageList];
|
||||
|
||||
// 在数据更新后设置 scrollId
|
||||
this.$nextTick(() => {
|
||||
this.scrollId = "item"+this.messageList[10].id;
|
||||
});
|
||||
|
||||
// 结束刷新状态
|
||||
this.refreshing = false;
|
||||
}, 800);
|
||||
|
|
|
|||
Loading…
Reference in New Issue