uniapp中scroll-view的简单案例

全栈小李

已于 2022-08-02 08:58:06 修改

阅读量479

点赞数 1

分类专栏：总结记录文章标签：前端 javascript html

于 2022-08-02 08:53:48 首次发布

本文链接：https://blog.csdn.net/qq_45162683/article/details/126114733

版权

总结记录专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<temolate>
   <view class="backColorFourth" >
			<scroll-view class="scroll-y" scroll-y="true" @scrolltolower="lower">
				<view class="backColorFourthbotom" v-for="item in currentPageData">
					<text class="contentTitleName1">{{item.memberNickName}}</text>
					<text class="contentTitleMobile1">{{item.memberMobile}}</text>
					<text class="contentTitleTime1">{{item.memberCreateTime | formatTime}}</text>
				</view>
			</scroll-view>
			<u-loadmore bg-color='#ffffff' :status="status" />
		</view>
</temolate>

data() {
			return {
				currentPageData: [],
				currentPageData2: {},
				//我的团员人数
				LeaguemembersNum: 0,
				params: {
					pageNumber: 1,
					pageSize: 5,
				},
				status: "loadmore",
			}
		},
		methods: {
			getMenber() {
				this.status = "loading";
				getLeageeMenber(this.params).then(res => {
					if (res.data.code == '200') {
						if (res.data.success && res.data.result.records.length > 0) {
							this.status = "loadmore";
							this.LeaguemembersNum = res.data.result.total;
							this.currentPageData  = this.currentPageData.concat(res.data.result.records)
						} else {
							this.status = "nomore";
						}
						if (res.data.result.records.length < 10) {
							this.status = "nomore";
						}

					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			// 下拉加载
			lower() {
				this.params.pageNumber++;
				this.getMenber();
			},

		}

.scroll-y {
		height: calc(135vh - 88rpx - var(--status-bar-height) - 344rpx - 170rpx);
	}
	.backColorFourth {
		background-color: #ffffff;
		height: 38rem;
		width: 90%;
		margin-left: 5%;
		margin-top: -39rem;
		border-radius: 10px;

	}