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