ssm41471/src/main/webapp/front/pages/messages/list.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<mescroll-uni @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
		
		<view class="cu-list menu-avatar comment solids-top">
				<view class="cu-item" v-for="(product,index) in list" :key="index" style="padding-left: 20rpx;">
					<view class="content">
						<view class="text-grey">用户：{{product.username}}</view>
						<view class="text-gray text-content text-df">
							{{product.content}}
						</view>
						<view v-if="product.reply" class="bg-grey padding-sm radius margin-top-sm  text-sm">
							<view class="flex">
								<view class="flex-sub">{{product.reply}}</view>
							</view>
						</view>
						<view class="margin-top-sm flex justify-between">
							<view class="text-gray text-df">{{product.addtime}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<button  class="add-btn" @click="onAddTap()">添加留言</button>

	</mescroll-uni>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption: {
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '~ 没有更多了 ~',
				},
				hasNext: true,
				searchForm: {},
				CustomBar: '0'
			};
		},
		onShow() {
			this.hasNext = true
			// 重新加载数据
			if (this.mescroll) this.mescroll.resetUpScroll()
		},
		onLoad() {
			this.hasNext = true
			// 重新加载数据
			if (this.mescroll) this.mescroll.resetUpScroll()
		},
		methods: {
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {