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
		}
	}
}
相关推荐
浩星10 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9159184119 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
初出茅庐的21 小时前
uniapp - AI 聊天中的md组件
前端·vue.js·uni-app
于慨1 天前
uniapp用webview导入本地网页,ios端打开页面空白问题
uni-app
于慨1 天前
uniapp云托管前端网页
前端·uni-app
y东施效颦1 天前
uni-app 配置华为离线推送流程
前端·vue.js·uni-app
paopaokaka_luck1 天前
基于SpringBoot+Uniapp球场预约小程序(腾讯地图API、Echarts图形化分析、二维码识别)
spring boot·小程序·uni-app
于慨1 天前
uniapp各端通过webview实现互相通信
uni-app
初出茅庐的2 天前
uniapp - AI 聊天页面布局的实现
前端·vue.js·uni-app