<!-- 賣家訂單 --><view class="conent" v-for="(item,index) in list" :key='index'><view class="conent-bott"><view class="bott-b"><view class="b-r"><view class="revokes" @click="rejectS(item.id,item)"><text>{{currentname}}撤銷</text></view></view></view><view class="share-itemS" v-if="item.showS"><view class="all-top " :class="currentTabs == item.id ? 'tab-list-active' : '' "v-for="(item,index) in allmi" :key='index' @click="alls" :data-current="item.id":data-name="item.name"><text>{{item.name}}</text></view></view></view></view> </view> export default {data() {return {// 列表list: [],currentTabs: 1,currentname: '同意',list: [{id: 3,name: '拒絕',},{id: 4,name: '同意',}],allmi: [{id: 3,name: '拒絕',},{id: 4,name: '同意',}],}},onLoad() {},methods: {sell() {var _this = thisthis.proims(data, ‘接口’).then((res) => {if (res.data.code == 200) {this.list = res.data.data//重要部分this.list.forEach((e) => (e.showS = false))}})},// 同意或駁回撤銷（賣家）rejectS(e, item) {this.showS = !this.showS;let index = this.list.indexOf(item);this.list[index].showS = item.showS === null ? true : !item.showS;this.list = [...this.list];},} } //csspage {background: #FAFAFA;}// 賣家訂單 .conent {width: 93%;height: auto;margin: auto;background: #fff;border-radius: 10rpx;// box-shadow: 1rpx 1rpx 1rpx #bfbfbf;box-shadow: 0 0 10px 0rpx #cccccc;margin-top: 15rpx;.conent-bott {width: 90%;height: auto;margin: auto;position: relative;.bott-b {width: auto;height: 120rpx;display: flex;color: #999999;justify-content: space-between;.b-r {width: auto;height: auto;display: flex;align-items: center;font-size: 28rpx;justify-content: space-between;.revokes {width: 210rpx;height: 50rpx;border: 1rpx solid #D2D2D2;display: flex;align-items: center;justify-content: center;color: #999999;margin-right: 10rpx;}}}.share-itemS {width: 170rpx;height: auto;background: #fff;position: absolute;right: 166rpx;// top: 248rpx;border-radius: 10rpx;box-shadow: 0 0 8px 0rpx #cccccc;// z-index: 1000;.all-top {width: auto;height: 80rpx;display: flex;align-items: center;justify-content: center;border-bottom: 1rpx solid #EFEFEF;font-size: 28rpx;color: #999999;}}.tab-list-active {color: #333333;font-weight: bold;font-size: 30rpx;}.jbott-b {width: auto;height: 120rpx;display: flex;justify-content: space-between;color: #999999;}}}.list-con {width: 100%;height: auto;background: #fff;margin: auto;margin-top: 30rpx;box-shadow: 5px 4px 10px #EEEEEE;.con-time {width: 100%;height: 75rpx;display: flex;align-items: center;border-bottom: 1rpx solid #F2F2F2;font-size: 28rpx;justify-content: space-around;.con-pho {width: auto;display: flex;font-size: 30rpx;align-items: center;color: #333333;}.con-suan {width: auto;display: flex;color: #999999;align-items: center;}}.con-con {width: 100%;height: 200rpx;display: flex;align-items: center;border-bottom: 1rpx solid #F2F2F2;color: #666666;font-size: 28rpx;justify-content: space-around;.con-pic {width: auto;height: 160rpx;display: flex;align-items: center;flex-direction: column;justify-content: space-evenly;.chan {font-size: 28rpx;color: #999999;font-size: 30rpx;}.mu {font-size: 34rpx;color: #333;font-weight: bold;}}}.con-bott {width: 100%;height: 100rpx;display: flex;align-items: center;color: #666666;font-size: 28rpx;justify-content: space-around;}}// .share {width: 100%;height: 100%;background: #000000;position: relative;z-index: 1; }.share-box {width: 100%;height: 100%;position: fixed;top: 0rpx;left: 0rpx;bottom: 0rpx;right: 0rpx;background-color: rgba(0, 0, 0, 0.4);transition: .3s;z-index: 999; }// 進入分享動畫 .share-show {transition: all 0.3s ease;transform: translateY(0%) !important; }

總結

以上是生活随笔為你收集整理的uni-app 实现点击列表隐藏显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。