uni-app(3)

最新推荐文章于 2024-03-04 13:27:33 发布

Hei D

最新推荐文章于 2024-03-04 13:27:33 发布

阅读量508

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_57472035/article/details/125940512

版权

背景：本篇是采用斗鱼接口简单制作的直播间页面

<template>
	<view>
		<uni-grid :column="2" :showBorder="false" :square="false">
			<uni-grid-item v-for="(item, index) in data.list" :key="index">
				<view style="width: 360rpx;" :style="{ marginLeft: index % 2 == 0 ? '10rpx' : '5rpx' }">
					<view style="position: relative;width: 360rpx;border-radius: 10rpx;overflow: hidden;">
						<image :src="item.roomSrc" style="width: 360rpx;height: 240rpx;border-radius: 10rpx;display: block;"></image>
						<view style="position: absolute;right: 0;top: 0;color: white;background-color: rgba(0, 0, 0, 0.5);font-size: 0.6em;padding: 2rpx;">{{ item.hn }}</view>
						<view style="position: absolute; bottom: 0; left: 0; display: flex;align-items: center;background-color: rgba(0, 0, 0, 0.5);border-radius: 4rpx;">
							<image style="width: 30rpx;height: 30rpx;border-radius: 50%;margin: 8rpx;" :src="item.avatar"></image>
							<text style="color: white;font-size: 0.6em;">{{ item.nickname }}</text>
						</view>
					</view>
					<view style="font-size: 0.7em;margin-bottom: 10rpx;">{{ item.roomName }}</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {},
			// #ifdef H5
			url: '/douyu/api/room/list',
			// #endif

			// #ifndef H5
			url: 'https://m.douyu.com/api/room/list',
			// #endif

			status: 'more'
		};
	},

	mounted() {
		this.getData();
	},

	onReachBottom() {
		this.getMore();
	},

	onPullDownRefresh() {
		uni.request({
			url: this.url,
			method: 'GET',
			data: { type: 'LOL', page: 1 },
			success: res => {
				console.log(res);
				this.data = res.data.data;
				this.getMore();

				uni.stopPullDownRefresh();
			},
			fail: () => {},
			complete: () => {}
		});
	},

	methods: {
		getMore() {
			const { nowPage, pageCount } = this.data;
			if (nowPage == pageCount) return;

			this.status = 'loading';
			uni.request({
				url: this.url,
				method: 'GET',
				data: { type: 'LOL', page: this.data.nowPage + 1 },
				success: res => {
					console.log(res);

					res.data.data.list = [...this.data.list, ...res.data.data.list];
					this.data = res.data.data;

					const { nowPage, pageCount } = this.data;

					this.status = nowPage == pageCount ? 'noMore' : 'more';
				},
				fail: () => {},
				complete: () => {}
			});
		},

		getData() {
			uni.request({
				url: this.url,
				method: 'GET',
				data: { type: 'LOL', page: 1 },
				success: res => {
					console.log(res);
					this.data = res.data.data;
					this.getMore(); //避免第一次刷新页面上只有的数据充满不了屏幕
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style scoped></style>

H5页面效果：