uniapp——展开和收起

耶啵奶膘

于 2024-08-10 17:18:49 发布

阅读量334

点赞数 6

分类专栏： uni、vue 文章标签： uni-app

本文链接：https://blog.csdn.net/xulihua_75/article/details/141093496

版权

uni、vue 专栏收录该内容

131 篇文章 7 订阅

订阅专栏

案例展示

在这里插入图片描述

代码

后台返回的数据格式如下：

 {
    1: "大富科技速度快放假手动阀",
    2: "第三方斯蒂芬斯蒂芬是的开发时间",
    4: "45345345",
    5: "电饭锅电饭锅地方"
}

<view class="tipTitle">温馨提示</view>
<view class="tips">
	<block v-for="(tItem,tIndex) in common.config.warm_reminder_charing" :key="tIndex">
		<view v-if="tIndex<=tipNum">
			{{tIndex}}、{{tItem}}
		</view>
	</block>
</view>
<view class="more" @click="look('open')" v-if="tipBtnShow">
	查看更多<image src="/static/images/downArrow.png" mode="aspectFill"></image>
</view>
<view class="more" @click="look('close')" v-if="!tipBtnShow">
	收起<image src="/static/images/downArrow.png" mode="aspectFill" style="transform: rotate(180deg);"></image>
</view>

.tipTitle {
	font-weight: bold;
	font-size: 28rpx;
	color: #3D3D3D;
	margin-top: 34rpx;
}

.tips {
	padding: 18rpx 0 31rpx;
	font-size: 25rpx;
	color: #3D3D3D;
	border-bottom: 1rpx solid #DCDCDC;
	line-height: 35rpx;
}

.more {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #FE8300;
	margin-top: 22rpx;

	image {
		width: 20rpx;
		height: 11rpx;
		margin-left: 8rpx;
	}
}

data() {
	return {
		tipNum: 2, //默认显示1、2条数据
		tipBtnShow: true
	};
},
methods: {
	// 查看更多和收起
	look(e) {
		if (e == 'open') {
			//获取最后一个配置项的前缀
			let lastKey = Object.keys(this.common.config.warm_reminder_charing).pop();
			let lastPrefix = this.common.config.warm_reminder_charing[lastKey].substring(0, 1); // 获取前缀
			this.tipNum = lastPrefix
			this.tipBtnShow = false
			return
		}
		if (e == 'close') {
			this.tipNum = 2
			this.tipBtnShow = true
			return
		}
	}
}