vue uniapp 折叠功能实现

基于我的另一篇转载文章，自己写的折叠功能

类似的功能可以参考我下面的代码（前端小白）

原始版参考：vue，uniapp折叠功能_庞胖的博客-CSDN博客

<template><view class="upay-content" :style="{height:winHeight}"><top showIcon title="收款流水" :style="{display:topDisabled}" titleColor="#FFF" titleFontSize="32"backColor="#2fa6f9"></top><view class="upay-main-content" :style="{top:headHeight}"><!-- 统计部分 --><view class="upay-incomeDetail-datecontent"><view class="upay-incomeDetail-head"><view style="padding-left: 35rpx;">{{chooseDate}}</view><view @click="gotoPage('openSelectWin')"> <span class="iconfont-menu-icon"style="margin-right: 10rpx;">{{screenIcon}}</span>筛选</view></view><view class="upay-incomeDetail-date" :class="{blockHight:hiddenFlag?1:0}"><view>{{chooseDate}}</view></view><view class="upay-incomeTotal-content"><view v-for="(item,index) in listArr" :key="item.text"><view class="pay-status-menu"><view class="pay-status">{{item.text}}</view><view class="pay-status-body"><view class="pay-font"><view class="pay-font-key">金额</view><view class="pay-font-value">{{item.money}}</view></view><view class="pay-font"><view class="pay-font-key">笔数</view><view class="pay-font-value">{{item.number}}</view></view></view></view></view></view></view><u-sticky :offset-top="sHt"><view :style="{width:topWidth,marginLeft:topLeft}"><!-- 上划统计部分 --><view class="showRecord" :style="{display:topTotal}" id="scrollbody"><view class="total_font"><view style="display: inline-flex; width: 100%;"><view class="showRecord_success_status">{{listArr[0].text}}</view><view>：</view><view class="showRecord_success_money">{{listArr[0].money}}</view><view>元，</view><view class="showRecord_success_number">{{listArr[0].number}}</view><view>笔；</view></view><view style="display: inline-flex;"><view class="showRecord_failed_status">{{listArr[1].text}}</view><view>：</view><view class="showRecord_failed_money">{{listArr[1].money}}</view><view>元，</view><view class="showRecord_failed_number">{{listArr[1].number}}</view><view style="width:71rpx;">笔；</view></view><view style="display: inline-flex;width: 38%;"><view class="showRecord_refund_status">{{listArr[2].text}}</view><view>：</view><view class="showRecord_refund_money">{{listArr[2].money}}</view><view>元，</view><view class="showRecord_refund_number">{{listArr[2].number}}</view><view>笔</view></view></view><view class="topIcon iconfont" v-html="topIcon" @click="backtop"></view><view class="top_font_icon" @click="backtop">TOP</view></view><view class="upay-incomeDetail-detailHead" :class="{detailtophead :classFlag}" id="tfloor1"><view>时间</view><view>通道</view><view>金额</view><view style="padding-right: 17rpx;">状态</view></view></view></u-sticky><view class="upay-incomeDetail-content"><view class="upay-incomeDetail-view"><view v-for="(incomeItem,index) in inComeList" :key="incomeItem.title" @click="show_detail(index)"><span class="showIcon iconfont" v-html="incomeItem.downIcon"></span><view class="upay-incomeDetail-payRecord"><view class="upay-incomeDetail-datefont"><span>{{incomeItem.title}}</span></view></view><!-- 折叠/展开 --><view v-if="incomeItem.isShow"><!-- 再次循环--><view class="upay-incomeDetail-view-cell" v-for="item in incomeItem.way" :key="item.logId"v-if="item.type!=='-1'" @click="gotoPage('inComeDetail',item)"style="padding-left: 152rpx;"><view class="font-color-gray" style="justify-content: center;">{{item.tradeTime}}</view><!-- 云闪付 --><view v-if="item.type==='40'" class="font-color-lightRed"><image class="iconfont-menu-ysf" src="../static/transactionFlow/unionPay.png"></image>{{item.typeText}}</view><!-- 微信 --><view v-if="item.type==='60'" class="font-color-green"><span class="iconfont-menu-way" v-html="wxIcon"> </span>{{item.typeText}}</view><view v-else class="font-color-lightRed"><view class="">{{item.stateText}}</view><view class=" right_row_icon iconfont">{{moreFont}}</view></view></view><view v-else class="upay-incomeDetail-view-cell" v-for="item in incomeItem.way" ><view class="font-color-gray">{{item.text}}</view></view></view><view :key="incomeItem.title" v-else><view style="border-bottom: 1px solid #FFFFFF;"></view></view></view></view></view></view></view>
</template><script>import Top from '@/components/top/top.vue';import {queryPayOrderInfoUPayTotal,queryPayOrderInfoUPayDetail,} from '@/api/mepayossApi.js';export default {components: {Top: Top},data() {return {chooseDate: '2022.5',scrollHeight: '',classFlag: false,topWidth: '94%',topLeft: '3%',topHidden: true,transFlowList: [],timeLineHeight: "",isActive: false,startTime: '',endTime: '',rowDownIcon: '\ue64c',rightArrow: '\ue70f',indicator: false,successIcon: '\ue650',faildIcon: '\ue6d5',refundIcon: '\ue6a8',date: [],passageway: [],calDate: '',maxDate: '',queryBeginDate: '',queryEndDate: '',queryPayChannel: '',showQueryDate: '',show: false,topTotal: 'none',mode: 'single',topDisabled: 'block',headHeight: '',winHeight: '',topIcon: '\ue63c',userFont: '\ue614',incomeFont: '\ue63f',moreFont: '\ue70f',wxIcon: '\ue7b4',zfbIcon: '\ue60a',ysfIcon: '\ue6f3',screenIcon: '\ue671',calendarIcon: '\ue6a9',screenTime: '',screenPay: '',inComeTotal: {successfulPayment: {price: '0.00',count: '0'},faildPayment: {price: '0.00',count: '0'},refund: {price: '0.00',count: '0'},unknown: {price: '0.00',count: '0'}},inComeList: [{title: '收款记录',way: [{type: '-1',text: '暂无收款记录'}]}],pageStart: 0,pageLength: 50,listArr: [{text: "成功",stateIcon: '\ue650',money: '0.00',number: '0',color: '#3CBB60'},{text: "失败",stateIcon: '\ue6d5',money: '0.00',number: '0',color: '#F5595B'},{text: "退款",stateIcon: '\ue6a8',money: '0.00',number: '0',color: '#FF8929'}],sHt: 0,sHt1: 0,typeFlag: 'none'}},onLoad(options) {const that = this;const sysHeaderInfo = getSysHeaderInfo();that.headHeight = sysHeaderInfo.allHeight + 'px';that.sHt = sysHeaderInfo.allHeight + 'px';const windowHeight = uni.getSystemInfoSync().windowHeight;const query = uni.createSelectorQuery();query.select('.upay-main-content').boundingClientRect(res => {if (res.height > windowHeight) {that.winHeight = res.height + sysHeaderInfo.allHeight + 84 + 'rpx';} else {that.winHeight = windowHeight + 84 + 'rpx';}}).exec();const query2 = uni.createSelectorQuery();query2.select('.upay-incomeDetail-datecontent').boundingClientRect(res => {that.sHt1 = res.height}).exec();that.calDate = getCurrentDate('-');that.maxDate = getCurrentDate('-') + ' 23:59:59';that.queryBeginDate = getCurrentDate();that.queryEndDate = getCurrentDate();if (options.query) {let query = JSON.parse(options.query);if (query.startTime !== '' && query.startTime.length !== 0) {that.queryBeginDate = query.startTime.replaceAll('-', '');}if (query.endTime !== '' && query.endTime.length !== 0) {that.queryEndDate = query.endTime.replaceAll('-', '');}if (query.payChannel !== '' && query.payChannel.length !== 0) {that.queryPayChannel = query.payChannel;}}if (JSON.stringify(options) == '{}') {console.log('初始加载')that.screen();}that.selectReset(options);that.getPayOrderInfoUPayDetail();that.getPayOrderInfoUPayTotal();},methods: {show_detail(index) {console.log(index)let that = thislet listData = that.inComeListlet isShow = that.inComeList[index].isShow // 先用一个变量接收一个原来的状态值listData[index].isShow = !isShowthat.inComeList = listDataif (listData[index].isShow == false) {listData[index].downIcon = '\ue70f';} else {listData[index].downIcon = '\ue644';}},async getPayOrderInfoUPayDetail() {const that = this;try {let param = {shopId: getUserShopInfo().shopId,shopType: '10',beginDate: that.queryBeginDate,endDate: that.queryEndDate,start: that.pageStart,length: that.pageLength,payOrderFlag: '10',draw: '1',payChannel: that.queryPayChannel};uni.showLoading({title: '加载中...'});const rt = await queryPayOrderInfoUPayDetail(param);uni.hideLoading();if (rt.length === 0) {let singleIncomeInfoNone = {type: '-1',text: '暂无收款记录'}that.inComeList.way.push(singleIncomeInfoNone);} else {for (let k = 0; k < rt.length; k++) {let singleIncomeInfo = {logId: rt[k].fromFlowId,type: rt[k].payChannel,typeText: getPayChannelText(rt[k].payChannel).text,payChanelCls: getPayChannelText(rt[k].payChannel).cls,amt: getFormatPayMoney(rt[k].billAcct),tradeTime: getFromatPayTime(rt[k].stateDate).time,time: getFromatPayTime(rt[k].stateDate).day,state: rt[k].state,stateText: getPayStateText(rt[k].state),shopId: rt[k].shopId,pfMerchantId: rt[k].pfMerchantId,cancelAcct: rt[k].cancelAcct,tradingTime: getTradeTime(rt[k].stateDate).date}that.transFlowList.push(singleIncomeInfo);};let obj = {}let result = []that.transFlowList.map((item) => {let key = item.time;if (obj[key]) {obj[key].push(item)} else {obj[key] = [item]}})for (const key in obj) {const element = obj[key]result.push({title: key,isShow: false,downIcon: '\ue70f',way: element});}that.inComeList = resultthat.$set(that.inComeList[0], 'isShow', true);that.$set(that.inComeList[0], 'downIcon', '\ue644');}} catch (e) {uni.hideLoading();if (that.pageStart === 0) {that.inComeList.way = [];let singleIncomeInfoNone = {type: '-1',text: '暂无收款记录'}that.inComeList.way.push(singleIncomeInfoNone);}console.log('请求获取支付流水信息失败')console.log(e.msg)}},async getPayOrderInfoUPayTotal() {const that = this;try {let param = {shopId: getUserShopInfo().shopId,shopType: '10',beginDate: that.queryBeginDate,endDate: that.queryEndDate,start: 0,length: 5,payOrderFlag: '10',draw: '1',payChannel: that.queryPayChannel}const rt = await queryPayOrderInfoUPayTotal(param);that.listArr[0].money = getFormatPayMoney(rt.paySucAcct);that.listArr[0].number = rt.paySuc;that.listArr[1].money = getFormatPayMoney(rt.payFAcct);that.listArr[1].number = rt.payF;that.listArr[2].money = getFormatPayMoney(rt.cancelSucAcct);that.listArr[2].number = rt.cancelSuc;} catch (e) {that.inComeTotal.successfulPayment.price = '0.00';that.inComeTotal.successfulPayment.count = '0';that.inComeTotal.faildPayment.price = '0.00';that.inComeTotal.faildPayment.count = '0';that.inComeTotal.refund.price = '0.00';that.inComeTotal.refund.count = '0';that.inComeTotal.unknown.price = '0.00';that.inComeTotal.unknown.count = '0';console.log('初始化流水失败')console.log(e.msg)}},gotoPage(type, data) {if (type === 'openSelectWin') {uni.redirectTo({url: '/pages-1/screen/screen?jumpPath=transactionFlow/transactionFlow'})}if (type === 'inComeDetail' && data != null) {uni.redirectTo({url: '/pages-1/transactionDetails/transactionDetails?data=' + JSON.stringify(data)})}},confirm(e) {this.show = false;this.calDate = e[0];this.queryBeginDate = e[0].replaceAll('-', '');this.queryEndDate = e[0].replaceAll('-', '');this.showQueryDate = e[0];this.inComeList[0].way = [];this.getPayOrderInfoUPayTotal();this.getPayOrderInfoUPayDetail();},close() {this.show = false;},selectReset(options) {const that = this;that.date = [{name: '本周',status: true,startTime: '',endTime: '',values: 'weeks'},{name: '上周',status: false,startTime: '',endTime: '',values: 'lastWeek'},{name: '本月',status: false,startTime: '',endTime: '',values: 'month'},{name: '三月',status: false,startTime: '',endTime: '',values: 'threeMonths'}];that.passageway = [{name: '全部',status: true,values: ''},{name: '微信',status: false,values: '60'},{name: '支付宝',status: false,values: '70'}];if (JSON.stringify(options) != '{}') {const query = JSON.parse(options.query);// 日期console.log("----------", query)for (var i = 0; i < that.date.length; i++) {if (that.date[i].values == query.timeDesc) {that.$set(that.date[i], 'status', true)} else {that.$set(that.date[i], 'status', false)}}// 通道for (var i = 0; i < that.passageway.length; i++) {if (that.passageway[i].values == query.payChannel) {that.$set(that.passageway[i], 'status', true)} else {that.$set(that.passageway[i], 'status', false)}}}},payChannelCode: function(payType) {const that = this;for (var i = 0; i < this.passageway.length; i++) {if (this.passageway[i].name == payType) {that.queryPayChannel = that.passageway[i].values;}}},setStatus(item, index, date) {const that = this;that.inComeList = [{title: '收款记录',way: [{type: '-1',text: '暂无收款记录'}]}]if (item.status == false) {this.$set(item, "status", true)let dateName = item.name;for (var i = 0; i < date.length; i++) {if (date[i].name != dateName) {this.$set(date[i], "status", false)}}// 显示日期if (dateName == '本周') {that.query('weeks');}if (dateName == '上周') {that.query('lastWeek');}if (dateName == '本月') {that.query('month');}if (dateName == '三月') {that.query('threeMonths');} else {that.payChannelCode(item.name);}}this.pageStart = 0;this.transFlowList = [];this.getPayOrderInfoUPayTotal();this.getPayOrderInfoUPayDetail();},//时间解析;Time: function(now) {let year = new Date(now).getFullYear();let month = new Date(now).getMonth() + 1;let date = new Date(now).getDate();if (month < 10) month = "0" + month;if (date < 10) date = "0" + date;return year + "-" + month + "-" + date},//本周第一天；showWeekFirstDay: function() {let Nowdate = new Date();let WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);let M = Number(WeekFirstDay.getMonth()) + 1;if (M < 10) {M = "0" + M;}let D = WeekFirstDay.getDate();if (D < 10) {D = "0" + D;}return WeekFirstDay.getFullYear() + "-" + M + "-" + D;},//本周最后一天showWeekLastDay: function() {let Nowdate = new Date();let WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);let WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000);let M = Number(WeekLastDay.getMonth()) + 1;if (M < 10) {M = "0" + M;}let D = WeekLastDay.getDate();if (D < 10) {D = "0" + D;}return WeekLastDay.getFullYear() + "-" + M + "-" + D;},//获得某月的天数：getMonthDays: function(myMonth) {let monthStartDate = new Date(new Date().getFullYear(), myMonth, 1);let monthEndDate = new Date(new Date().getFullYear(), myMonth + 1, 1);let days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);return days;},//点击事件query: function(way) {const that = this;that.pageStart = 0;that.transFlowList = [];let paramMap = {startTime: this.startTime,endTime: this.endTime}that.queryBeginDate = '';that.queryEndDate = '';switch (way) {case 'weeks':that.queryBeginDate = this.showWeekFirstDay().replaceAll("-", "");that.queryEndDate = this.showWeekLastDay().replaceAll("-", "");break;case 'lastWeek':that.queryBeginDate = this.Time(new Date(new Date().getFullYear(), new Date().getMonth(),new Date().getDate() - new Date().getDay() - 6)).replaceAll("-", "");that.queryEndDate = this.Time(new Date(new Date().getFullYear(), new Date().getMonth(),new Date().getDate() + (6 - new Date().getDay() - 6))).replaceAll("-", "");break;case 'month':var days = this.getMonthDays(new Date().getMonth());that.queryBeginDate = this.Time(new Date(new Date().getFullYear(), new Date().getMonth(), 1)).replaceAll("-", "");that.queryEndDate = this.Time(new Date(new Date().getFullYear(), new Date().getMonth(),days)).replaceAll("-", "");break;case 'threeMonths':var days = this.getMonthDays(new Date().getMonth());that.queryBeginDate = this.Time(new Date(new Date().getFullYear(), new Date().getMonth() - 2,1)).replaceAll("-", "");that.queryEndDate = this.Time(new Date(new Date().getFullYear(), new Date().getMonth(),days)).replaceAll("-", "");break;}},backtop() {uni.pageScrollTo({scrollTop: 0});this.pageStart = 0;},screen() {if (this.screenTime == '' || this.screenTime == null) {// this.screenTime = '本周';this.query('weeks')}if (this.screenPay == '' || this.screenPay == null) {this.screenPay = '全部';}}},onReachBottom() {this.pageStart = this.pageStart + this.pageLength;this.getPayOrderInfoUPayDetail();},onPageScroll: function(e) {const that = this;const sysHeaderInfo = getSysHeaderInfo();that.headHeight = sysHeaderInfo.allHeight + 'px';that.sHt = sysHeaderInfo.allHeight + 'px';let totalScrollHeight = sysHeaderInfo.allHeight + that.sHt1;console.log(e.scrollTop + '------' + totalScrollHeight)if (e.scrollTop >= totalScrollHeight) {this.topTotal = 'block';this.topWidth = '100%';this.topLeft = '';this.classFlag = true;} else {this.topTotal = 'none';this.topWidth = '94%';this.topLeft = '3%';this.classFlag = false;}if (e.scrollTop >= 360) {}},}
</script>
<style>.upay-content {background-color: #F1F1F8;width: 750rpx;height: 150rpx;}.upay-title-background {background-color: #2fa6f9;width: 750rpx;height: 150rpx;}.upay-main-content {position: absolute;width: 100%;background-color: #F1F1F8;}.upay-menu-content {width: 100%;min-height: 290rpx;border-radius: 20rpx;margin: 10rpx 20rpx 20rpx 0;background-color: #2fa6f9;background-size: 100% auto;}.upay-incomeDetail-content {width: 94%;margin-left: 3%;min-height: 310rpx;border-radius: 20rpx;background-size: 100% auto;background-color: #FFFFFF;}.upay-incomeDetail-datecontent {width: 94%;border-radius: 20rpx;margin: 30rpx 0 30rpx 25rpx;background: url('@/static/mainPage/income.png') no-repeat;background-size: 100% auto;}.upay-incomeDetail-date {width: 706rpx;background-color: #E6F5FF;height: 64rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;font-size: 30rpx;color: #208AD3;}.upay-incomeDetail-payRecord {width: 706rpx;height: 71rpx;background-color: #CEEBFF;}.upay-incomeDetail-datefont {margin-left: 4rpx;width: 104rpxrpx;height: 24rpx;font-size: 24rpx;font-weight: 400;color: #333333;line-height: 73rpx;padding-left: 28rpx;}.upay-incomeDetail-now {font-size: 35rpx;font-weight: 400;color: #333333;text-align: center;line-height: 75rpx;}.upay-incomeTotal-center {width: 0;height: 64rpx;border: 1rpx solid #F1F1F8;margin-top: 29rpx;}.upay-incomeTotal-down {width: 0;height: 64rpx;border: 1rpx solid #F1F1F8;margin-top: 138rpx;margin-left: -17rpx;}.upay-incomeTotal-common-bottom :first-child {flex-basis: 35%;margin-left: 30rpx;}.upay-incomeDetail-head {height: 88rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;justify-content: space-between;flex-grow: 1;text-align: center;color: #FFFFFF;font-size: 28rpx;width: 94%;}.upay-incomeDetail-detailHead {border-radius: 20rpx 0 0 0;background: url('@/static/mainPage/income.png') no-repeat;background-size: 100% auto;height: 88rpx;display: flex;align-items: center;justify-content: center;color: #FFFFFF;font-size: 28rpx;justify-content: space-around;padding-left: 128rpx;}.detailtophead {border-radius: 0 0 0 0;background: ;background-size: 100% auto;height: 75 rpx;display: flex;align-items: center;justify-content: center;background-color: #2FA6F9;color: #FFFFFF;font-size: 28rpx;justify-content: space-around;padding-left: 145rpx;padding-right: 24rpx;}.upay-incomeDetail-view-cell {display: flex;flex-direction: row;min-height: 75rpx;align-items: center;justify-content: center;font-size: 25rpx;position: relative;}.upay-incomeDetail-view-cell:not(:last-child) ::after {content: '';position: absolute;left: 22%;bottom: 0;width: 75%;height: 0;border: 1rpx solid #F1F1F8;font-size: 65rpx;}.upay-incomeDetail-view-cell {flex-basis: 25%;text-align: center;}.upay-incomeDetail-view-cell :last-child {display: flex;align-items: center;justify-content: center;text-align: center;}.font-color-green {color: #3FB764;display: flex;align-items: center;font-size: 24rpx;width: 27%;padding-left: 4%;}.font-color-blue {color: #2FA6F9;display: flex;align-items: center;font-size: 24rpx;width: 31%;padding-left: 1%;}.font-color-success {color: #2FA6F9;display: flex;align-items: center;font-size: 24rpx;width: 31%;padding-right: 25rpx;padding-left: 1rpx;}.font-color-lightRed {color: #FF6565;display: flex;align-items: center;font-size: 24rpx;width: 31%;padding-right: 25rpx;}.font-color-gray {color: #A8A8A8;display: flex;align-items: center;font-size: 24rpx;width: 27%;padding-right: 3rpx;}.iconfont-menu-icon {font-family: "iconfont" !important;width: 38rpx;height: 38rpx;color: #FFFE8D;}.iconfont-menu-way {font-family: "iconfont" !important;width: 51rpx;height: 60rpx;}.iconfont-menu-rightRow {color: #CAE0EF;font-size: 36rpx;padding: 32px 0px 1px 20px;}.iconfont-menu-ysf {font-family: "iconfont" !important;width: 26rpx;height: 26rpx;padding-left: 13rpx;padding-right: 13rpx;}.successful-menu-state {padding: 10rpx 14rpx 0 20rpx;display: flex;justify-content: space-between;align-items: center;}.successful-state-font {width: 20rpx;color: #00B132;font-size: 30rpx;margin-top: -10rpx;}.refund-menu-state {padding: 10rpx 20rpx;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;}.refund-state-font {width: 20rpx;color: #FF7200;margin: 13rpx 0;}.faild-menu-state {padding: 10rpx 20rpx;display: flex;justify-content: space-between;align-items: center;}.faild-state-font {width: 20rpx;color: #FF3442;font-size: 30rpx;}.unknown-menu-state {padding: 10rpx 20rpx;display: flex;justify-content: space-between;align-items: center;}.unknown-state-font {width: 20rpx;color: #FFA200;font-size: 30rpx;}.unit-text-wight {margin-left: 10rpx;font-size: 36rpx;}.record-font {font-size: 36rpx;}.acccomunt-size {font-size: 24rpx;width: 38%;padding: 0 0 0 9px;align-items: center;}.font-spacing {padding: 0 48% 0 0;}.complain {height: 64rpx;box-sizing: border-box;}.type-title {line-height: 2;font-size: 36rpx;}.type-view {display: flex;}.type-background {margin-right: 20rpx;display: flex;width: 147rpx;height: 51rpx;background: #BFE5FF;border-radius: 26px;align-items: center;justify-content: center;margin: 23rpx 14rpx 14rpx 15rpx;}.type-font {width: 80rpx;height: 25rpx;font-size: 26rpx;font-weight: 400;color: #3C8CC3;line-height: 25rpx;text-align: center;}.type-li {margin-right: 20rpx;}.type-item {background-color: #F5F5F5;width: 161rpx;height: 71rpx;border-radius: 36rpx;border: 1px solid #ccc;color: #777777;display: flex;align-items: center;justify-content: center;}.bgcolor {background-color: #2FA6F9;}.fontcolor {color: #FFFFFF;}.upay-incomeTotal-content {width: 703rpx;height: 323rpx;background: #FFFFFF;border-radius: 0 0 20rpx 20rpx;flex-wrap: wrap;display: flex;align-content: flex-start;}.item {display: flex;line-height: 36rpx;display: flex;justify-content: space-between;align-items: center;height: 110rpx;width: 100%;box-sizing: border-box;}.item {display: flex;line-height: 36rpx;display: flex;justify-content: space-between;align-items: center;height: 110rpx;width: 100%;box-sizing: border-box;}.item:nth-child(n+1) {border-bottom: 1px solid #ccc;}.item:last-child {border: 0;}.item-status {display: flex;flex-wrap: wrap;width: 10%;height: 60%;position: relative;justify-content: center;padding-right: 3%;}.item-status-icon {font-size: 47rpx !important;}.item-status-rightRow {display: contents;}.item-status-text {width: 100%;margin-top: 6rpx;font-size: 26rpx;color: #0d0d0d;text-align: center;}.item-status-rightRow {margin: -26px 0 0px 63px;color: #CAE0EF;}.item-money {text-align: right;align-items: flex-end;width: 50%;}.item-money-value {color: #3CBB60;font-size: 42rpx;display: inline;padding-right: 10rpx;}.item-money-key {font-size: 30rpx;color: #000000;padding-left: 10rpx;display: contents;}.item-number {text-align: right;width: 40%;}.item-number-value {color: #3CBB60;font-size: 42rpx;display: inline;padding-right: 10rpx;}.item-number-key {font-size: 28rpx;color: #000000;padding-left: 10rpx;display: contents;}.upay-incomeTotal-content::before {font-size: 26rpx;color: #ccc;position: absolute;right: 0;top: 2rpx;}.item-status-successIcon {margin-bottom: 6%;font-size: 47rpx;}.showRecord {height: 73rpx;background-color: #ffffff;font-size: 26rpx;padding: 3% 3%;}.showRecord_success_status {font-size: 28rpx;color: #333333;padding-left: 2%;width: 8%;}.showRecord_success_money {color: #3CBB60;font-size: 27rpx;padding-right: 1%;}.showRecord_success_number {color: #3CBB60;font-size: 26rpx;padding-right: 8rpx;}.showRecord_failed_status {font-size: 28rpx;color: #333333;padding-left: 5%;padding-right: 2rpx;width: 27%;}.showRecord_failed_money {color: #F5585A;font-size: 27rpx;padding-left: 0%;padding-right: 1%;}.showRecord_failed_number {color: #F5585A;font-size: 26rpx;padding-right: 8rpx;}.showRecord_refund_status {width: 21%;font-size: 28rpx;}.showRecord_refund_money {color: #FF8929;font-size: 26rpx;padding-left: 2%;padding-right: 2%;}.showRecord_refund_number {color: #FF8929;font-size: 26rpx;padding-left: 8rpx;padding-right: 8rpx;}.u-scroll-list {padding-bottom: 0 !important;}.total_font {float: left;width: 100%;}.topIcon {position: absolute;right: 40rpx;top: 36rpx;color: #2FA6F9;font-size: 36rpx;}.top_font_icon {position: absolute;right: 38rpx;top: 75rpx;color: #2FA6F9;font-size: 18rpx;}.totalHidden {display: none;}.right_row_icon {color: #2FA6F9;width: 12rpx;height: 23rpx;padding-left: 10rpx;}.calendar-font {color: #333333 !important;}.pay-status {width: 63rpx;height: 121rpx;border-radius: 9rpx 0 0 9rpx;background-color: #2FA6F9;align-items: center;display: flex;text-align: center;font-size: 33rpx;}.pay-status-body {width: 231rpx;height: 107rpx;background-color: #E6F5FF;border-radius: 0 9rpx 9rpx 0rpx;padding-top: 14rpx;align-items: center;}.pay-status-menu {display: flex;padding: 25rpx 0rpx 0px 36rpx;color: #FFFFFF;}.pay-font {display: flex;padding: 5rpx 0;}.pay-font-key {color: #333333;font-size: 28rpx;padding: 0 10rpx;}.pay-font-value {color: #0082DC;font-size: 32rpx;}.showIcon {display: flex;align-items: flex-end;color: #2FA6F9;float: right;align-items: center;line-height: 63rpx;font-size: 26rpx;width: 51rpx;}
</style>

vue uniapp 折叠功能实现相关推荐

基于android的防抖音直播,基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能...
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
vue仿移动端京东搜索历史自适应长度超两行折叠功能
1.根据文本自适应宽度 2.标签超出两行显示两行 3.展开收起箭头按钮永远置于末位,若只有两行则箭头按钮隐藏,若超出两行,将箭头符号置于第二行的末位效果如下图所示:  ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
uni-app搜索功能前后端开发（页面）
uni-app搜索功能前后端开发(页面) 博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 借助的插件地址插件地址展示前端是 ...
使用VUE(uniapp)和Spring boot做的小游戏远古帝国
1.游戏介绍代码已经从github迁移到gitee 欢迎大家start,本游戏ui和游戏思路完全参考原版游戏远古帝国,但是代码完全自己开发,和原本没有任何关系,本游戏永远不会盈利,做这个游戏只是处 ...
vue整合uniapp_基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
前端vue uni-app自定义精美海报生成组件
在当前技术飞速发展的时代,软件开发的复杂度也在不断提高.传统的开发方式往往将一个系统做成整块应用,一个小的改动或者一个小功能的增加都可能引起整体逻辑的修改,从而造成牵一发而动全身的情况.为了解决这个问 ...
[Eclipse]GEF入门系列（七、XYLayout和展开/折叠功能）
前面的帖子里曾说过如何使用布局,当时主要集中在ToolbarLayout和FlowLayout(统称OrderedLayout),还有很多应用程序使用的是可以自由拖动子图形的布局,在GEF里称为XYL ...
［APP］- 找回Xcode7的代码折叠功能
为什么80%的码农都做不了架构师?>>> 原找回Xcode7的代码折叠功能升级到Xcode7后,会发现代码折叠功能不见了,这是怎么回事? 其实这个功能还在的,只是苹果默认把 ...

vue uniapp 折叠功能实现

vue uniapp 折叠功能实现相关推荐

最新文章

热门文章