1- uniapp开发中手机端列表的“展开/收起”功能

1、列表和控制按钮的html

2、data中设置默认不展开

3、计算属性控制"收起"时显示几条数据

4、点击方法改变显示展开/收起

<template>
	<view>
		<view class="row" v-for="(row, index) in visibleRows" :key="index">
			<view class="notional">{{ row.currency }}</view>
		</view>
		<!-- 展开/收起按钮 -->
		<view class="btn_expanded" @click="toggleListRate">
			<view class="toggle-button">
				{{ isExpandedRate ? '收起' : '展开更多' }}
			</view>
			<view class="expanded">
				<img :src="isExpandedRate ? expandedImg : expandedCutImg" alt="" class="expandedImg">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rows:[
					{currency:"A"},
					{currency:"B"},
					{currency:"C"},
					{currency:"D"},
					{currency:"E"},
					{currency:"F"}
				],
				isExpandedRate: false, // 默认情况下不展开
				expandedImg: require('../../static/images/icon_com_down_grey.png'),
				expandedCutImg: require('../../static/images/icon_com_open_grey.png'),
			}
		},
		computed: {
			visibleRows() {
				return this.isExpandedRate ? this.rows : this.rows.slice(0, 2); // 假设默认显示前5行
			}
		},
		methods: {
			toggleListRate() {
				this.isExpandedRate = !this.isExpandedRate; // 切换展开/收起状态
			},
		}
	}
</script>

<style>
	.row {
		display: flex;
		justify-content: flex-end;
	}
	.notional {
		width: 100%;
		text-align: center;
		line-height: 60rpx;
		background-color: beige;
		border-bottom: 1rpx solid #646496;
	}
	.btn_expanded {
		 width: 600rpx;
		display: flex;
		margin-top: 24rpx;
		margin-bottom: 32rpx;
		margin: auto;
		justify-content: center;
	}

	.toggle-button {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #9FA5AF;
		letter-spacing: 0;
		font-weight: 400;
		margin-top: 24rpx;
		margin-bottom: 32rpx;
		line-height: 48rpx;
	}

	.expanded {
		width: 40rpx;
		height: 40rpx;
		margin-top: 30rpx;
		margin-bottom: 32rpx;
	}

	.expandedImg {
		width: 100%;
		height: 100%;
	}
</style>