uniapp——展开和收起

案例展示


代码

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

复制代码
 {
    1: "大富科技速度快放假手动阀",
    2: "第三方斯蒂芬斯蒂芬是的开发时间",
    4: "45345345",
    5: "电饭锅电饭锅地方"
}
html 复制代码
<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>
css 复制代码
.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;
	}
}
javascript 复制代码
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
		}
	}
}
相关推荐
2501_9159184110 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手10 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_9159090613 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师14 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj15 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q5110082851 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921431 天前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082851 天前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app