uniapp 下拉刷新 nvue list组件 cell组件

最新推荐文章于 2024-07-27 17:32:19 发布

Thanks-

最新推荐文章于 2024-07-27 17:32:19 发布

阅读量2.3k

点赞数

分类专栏： uni-app vue 安卓

本文链接：https://blog.csdn.net/Libertied/article/details/113767995

版权

安卓同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

uni-app

5 篇文章 1 订阅

订阅专栏

uniapp nvue 下拉刷新组件使用样式以及布局下拉都可正常使用具体看使用方法即可

        <!-- list组件 -->
		<list class="listView" show-scrollbar="false">
			<!-- 下拉刷新 -->
			<refresh @pullingdown="pullingdown" :display="showLoading ? 'show':'hide'" @refresh="onrefresh" class="refreshLayer">
				<image class="loadingImg" src="/static/app-plus/image/loading.gif"></image>
				<text class="loadingTitle">刷新中...</text>
			</refresh>
            <cell v-for="(item,index) in dataList" :key="index">
				<view class="listItemView" :style="index==0? 'margin-top:30rpx' : ''">
					<view class="marginleftView">
						<view class="showInformationView">
							<view class="userInformationItem">
								<text class="showLeftText">姓名</text>
								<text class="showRightText">{{item.name}}</text>
							</view>
							<view class="userInformationItem">
								<text class="showLeftText">手机号</text>
								<text class="showRightText">{{item.phoneNum}}</text>
							</view>
							<view class="userInformationItem">
								<text class="showLeftText">微信号</text>
								<text class="showRightText">{{item.weichatNum}}</text>
							</view>
							<view class="userInformationItem">
								<text class="showLeftText">性别</text>
								<text class="showRightText">{{item.sex == 1 ? '男' : '女'}}</text>
							</view>
							<view class="userInformationItem">
								<text class="showLeftText">出生日期</text>
								<text class="showRightText">{{item.birthday}}</text>
							</view>
						</view>
					</view>
				</view>
			</cell>
		</list>

<script>
	export default {

		data() {
			return {
				dataList: [],
				showLoading: false,
			};
		},

		onShow() {
		},

		//加载完成
		onLoad(options) {
			this.getPageDataList(false)
		},

		methods: {
			//下拉刷新
			onrefresh() {
				this.showLoading = true
				//根据当前按钮判断请求数据类型
				this.getPageDataList(true)
			},
			//获取当前页面需要展示的数据
			//tp 列表数据类型
			//isRefresh 是否为下拉刷新
			getPageDataList: function(isRefresh) {
				//判断是否为下拉刷新
				if (isRefresh) {
					this.showLoading = false
				}
			},
		}
	}
</script>

	.listView {
		flex: 1;
		background-color: #F5F5F5;
		margin-top: 110rpx;
		padding-bottom: 100rpx;
	}


	.listItemView {
		margin-left: 30rpx;
		margin-bottom: 30rpx;
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.showInformationView {
	}

	.userInformationItem {
		margin-top: 32rpx;
		flex-direction: row;
	}

	.showLeftText {
		width: 214rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.showRightText {
		width: 400rpx;
		font-size: 30rpx;
		color: #000000;
		text-align: right;
	}

    .refreshLayer{
		left: 0;
		right: 0;
		padding: 20rpx;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.loadingImg{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.loadingTitle {
		text-align: center;
		font-size: 30rpx;
	}