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
		}
	}
}
相关推荐
ModyQyW18 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端2 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
today喝咖啡了吗2 天前
uniapp项目中node_modules\sass\sass.dart.js的体积过大怎么处理
javascript·uni-app·sass
遗憾随她而去.2 天前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰3 天前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app