uniapp——展开和收起

案例展示

代码

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

 {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 = lastPrefixthis.tipBtnShow = falsereturn}if (e == 'close') {this.tipNum = 2this.tipBtnShow = truereturn}}
}