<template> <view> <scroll-view :scroll-top="scrollTop" scroll-y="true" class="mess-scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" :refresher-triggered="refresh" @refresherrefresh="onRefresh" refresher-enabled="true"> <view v-for="(item, index) in info" :key="index" class="mess-item"> <view class="mess-head"> <view class="mess-title">{{ item.title }}</view> <view class="mess-data-status"> <view class="mess-date">{{ item.date }}</view> <view class="mess-status"></view> </view> </view> <view class="mess-content">{{ item.desc }}</view> </view> </scroll-view> </view> </template> <script> export default { data() { return { scrollTop: 0, refresh: false, info: [ { title: '取消订单', date: '2024-03-02 11:20:36', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 1, }, { title: '交易成功', date: '2023-12-12 01:16:45', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 2, }, { title: '未知错误', date: '2023-03-02 11:20:36', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 404, }, { title: '取消订单', date: '2024-03-02 11:20:36', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 1, }, { title: '交易成功', date: '2023-12-12 01:16:45', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 2, }, { title: '未知错误', date: '2023-03-02 11:20:36', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 404, }, { title: '取消订单', date: '2024-03-02 11:20:36', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 1, }, { title: '交易成功', date: '2023-12-12 01:16:45', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 2, }, { title: '未知错误', date: '2023-03-02 11:20:36', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 404, }, { title: '取消订单', date: '2024-03-02 11:20:36', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 1, }, { title: '交易成功', date: '2023-12-12 01:16:45', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 2, }, { title: '未知错误', date: '2023-03-02 11:20:36', desc: '这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述这是一条描述', status: 404, }, ], } }, methods: { onRefresh() { this.refresh = true; uni.showToast({ title: "触发了下拉刷新", duration: 1500, icon: "none" }) // 这里不能直接让refresh直接为false,否则可能会发生下拉加载无法复位的情况 setTimeout(() => { this.refresh = false; }, 500) }, upper: function (e) { uni.showToast({ title: "触发了上拉事件", duration: 1500, icon: "none" }) }, lower: function (e) { uni.showToast({ title: "触发了触底事件", duration: 1500, icon: "none" }) }, scroll: function (e) { console.log(e) }, } } </script> <style lang="scss" scoped> .mess-scroll-Y { height: 100%; background-color: #f2f2f2; padding: 32rpx; .mess-item { background-color: #fff; border-radius: 16rpx; margin-bottom: 16rpx; padding: 32rpx; .mess-head { display: flex; justify-content: space-between; align-items: center; .mess-title { font-size: 32rpx; } .mess-data-status { display: flex; align-items: center; .mess-date { color: #ccc; font-size: 24rpx; } .mess-status { width: 0; height: 0; border: 4rpx solid lightblue; border-radius: 4rpx; margin-left: 16rpx; } } } } .mess-content { color: #ccc; margin: 16rpx 0 0; word-break: break-all; font-size: 26rpx; text-overflow: ellipsis; overflow: hidden; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } } </style>
- scroll-view uniapp scroll 2023 viewscroll-view uniapp scroll 2023 scroll-view uniapp scroll view 横向scroll-view uniapp scroll scroll-view组件 位置uniapp scroll-view scroll scroll-into-view view scroll-view scroll-view程序scroll view scroll scroll-view scroll-top顶部 源代码scroll-view更多scroll bindrefresherrefresh scroll-view程序scroll