uni-app 实现点击列表隐藏显示

 <!-- 卖家订单 --><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 实现点击列表隐藏显示相关推荐

html列表隐藏显示出来,JavaScript栏目列表隐藏/显示简单实现
1.构建JavaScript库 (function(){ //将命名空间IC注册到window window['JSHide']={}; //隐藏侧边栏,并将图片换成右箭头图片 function yc ...
uni app push 点击通知栏打开app 跳转页面
参考点击通知栏消息启动应用后无法跳转页面 - DCloud问答 onLaunch: function() {//#ifdef APP-PLUSplus.push.addEventListener(& ...
vue实现两重列表集合，点击显示，点击隐藏的折叠效果，（默认显示集合最新一条数据，点击展开，显示集合所有数据）...
效果图: 默认显示最新一条数据: 点击显示所有数据: 代码: 说明:这里主要是这块用来控制显示或者隐藏根据当前点击的这个方法里传递的index 对应 isShow 数组里的index ,对 ...
android 10.0 launcher3 app列表隐藏某个app
1.概述在10.0的系统产品中,对于在Launcher3中对于一些app不想显示出来的app中,需要在app列表中去掉不显示这些app的需要更改两处地方,一处是加在列表时一处是安装卸载app 更 ...
android 软键盘监听、隐藏、显示、点击空白处隐藏和Android KEYCODE 键值大全
android 软键盘监听.隐藏.显示.点击空白处隐藏. textView.setOnKeyListener(new View.OnKeyListener() {@Overridepublic boo ...
微信小程序之多列表的显示和隐藏功能【附源码】
效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和隐藏,然后通过 ...
php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
jQuery能够简单快捷的实现很多功能,因此在前端开发中被广泛使用,正在学习jQuery的小伙伴,你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)?这篇文章就和大家讲讲 ...
android 获取键盘回车键事件，设置软键盘回车键显示内容，点击空白处隐藏软键盘
首先设置EditText的回车属性 drawable文件 @drawable/editcolor <?xml version="1.0" encoding="utf ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...

uni-app 实现点击列表隐藏显示

uni-app 实现点击列表隐藏显示相关推荐

最新文章

热门文章