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
		}
	}
}
相关推荐
FinelyYang17 小时前
uniapp video视频全屏播放后退出,页面字体变大,样式混乱问题
前端·javascript·uni-app
浩星17 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
IT 前端 张17 小时前
uni-app在安卓设备上获取 (WIFI 【和】以太网) ip 和 MAC
android·tcp/ip·uni-app
F2E_Zhangmo20 小时前
第一章 uniapp实现兼容多端的树状族谱关系图,创建可缩放移动区域
前端·javascript·uni-app
儿歌八万首20 小时前
UniApp 加载 Web 页面解决方案
javascript·vue.js·uni-app
2501_9159184120 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
半世浮生21 小时前
uniapp开发微信路由踩坑
前端·uni-app
2501_915909061 天前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
军军君011 天前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
小徐_23332 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app