微信小程序之双重循环(包含左滑删除,以及数据各项处理)

 1 <view wx:for="{{hommer}}" wx:for-item="item" wx:for-index="index" wx:key="{{item.id}}">
 2   <view bindtap="onTap" data-ide="{{item.id}}">
 3     <view style="height:15vw;line-height:15vw;background-color:#999;border-bottom:2rpx solid #FFF;text-align:center;">{{item.name}}</view>
 4   </view>
 5   <view wx:if="{{item.onClick}}">
 6     <view >
 7        <slideitem id="slideitem-{{index}}" class='cell-class' row="{{index}}" itemColor="#fff" data-homeid="{{item.homeId}}" data-userphone="{{items.userPhone}}" catch:deleteItemEvent='deleteAction' catch:slideItemEvent='slideAction' cellHeight="120rpx" wx:for="{{item.hommerZ}}" wx:for-item="items" wx:for-index="idx" wx:key="{{items.id}}">
 8           <view wx:if="{{items.isMain===1}}">
 9             <view>
10               <view class="showText2" style="float:left;">{{items.userPhone}}</view>
11             </view>
12             <view class="showText1" style="float:right;">
13               <view bindtap="updataName" data-homeid="{{item.homeId}}" class="showText3">{{items.userNickname}}</view>
14               <view class="righttext1">
15                 <picker bindchange="transfer" value="{{index}}" data-value="{{value}}" data-homeid="{{item.homeId}}" data-userphone="{{items.userPhone}}" range="{{rangeHome}}">转移
16                 </picker>
17               </view>
18             </view>
19           </view>
20           <view wx:else>
21             <view>
22               <view class="showText2" style="float:left;">{{items.userPhone}}</view>
23             </view>
24             <view class="showText1" style="float:right;">
25               <view bindtap="updataName" data-homeid="{{item.homeId}}" class="showText3">{{items.userNickname}}</view>
26             </view>
27           </view>
28         </slideitem>
29       <!-- <view style="color:#111;height:10vw;line-height:10vw;background-color:#EBEBEB;border-bottom:2rpx solid #FFF;text-align:center;">{{itm.namee}}</view> -->
30     </view>
31   </view>
32 </view>
  1 .cell-class{
  2   display: block;
  3   width: 100%;
  4   border-bottom: 4rpx solid #EBEBEB;
  5   font-size:26rpx;
  6 }
  7 .inner.del{
  8     background-color: #e64340;
  9     width: 180rpx;text-align: center;
 10     z-index: 4;
 11     right: 0;
 12     color: #fff
 13 }
 14 
 15 .kind-list-item-bd {
 16   height: 0;
 17   overflow: hidden;
 18 }
 19 
 20 .kind-list-item-bd-show {
 21   height: auto;
 22 }
 23 
 24 .clear {
 25   clear: both;
 26 }
 27 
 28 .borderContainer {
 29   height: 10vw;
 30   line-height: 10vw;
 31   background-color: #5cacee;
 32 }
 33 .newHome{
 34   display:flex;align-items:center;margin-left:auto;color:#fff;font-size:30rpx;float: right;
 35 }
 36 .homeBorder {
 37   display: flex;
 38   justify-content: space-between;
 39   font-size: 28rpx;
 40   color: #fff;
 41 }
 42 
 43 .show {
 44   background-color: #9f9f9f;
 45 }
 46 
 47 .nickName {
 48   margin: 0 3vw;
 49   display: inline-block;
 50 }
 51 
 52 .dqhome {
 53   margin: 0 5vw;
 54   color: #fff;
 55   display: inline-block;
 56 }
 57 
 58 .rightBorder {
 59   float: right;
 60   padding-right: 2vw;
 61 }
 62 
 63 .rightBorder1 {
 64   float: right;
 65   padding-right: 2vw;
 66 }
 67 
 68 .rightBorder2 {
 69   display: flex;
 70   align-items: center;
 71 }
 72 
 73 .righttext {
 74   display: inline-block;
 75   margin: 0 2vw;
 76 }
 77 
 78 .jia {
 79   width: 7vw;
 80   height: 7vw;
 81   padding-right: 4vw;
 82 }
 83 
 84 .homeText {
 85   margin: 0 2vw;
 86 }
 87 
 88 .jia1 {
 89   width: 5.6vw;
 90   height: 5.6vw;
 91   padding-top: 20rpx;
 92   /* margin-top: 10rpx; *//* margin: 3vw 0; */
 93 }
 94 
 95 .jia2 {
 96   width: 5.6vw;
 97   height: 5.6vw;
 98 }
 99 
100 .righttext1 {
101   display: inline-block;
102   margin: 0 2vw;
103   color: #E16024;
104 }
105 
106 .dataBorder {
107   /* height: 12vw; */
108   line-height: 12vw;
109   
110 }
111 
112 .dataBorder1 {
113   background-color: #9f9f9f;
114   font-size: 28rpx;
115   color: #fff;
116 }
117 
118 .dataBorder3 {
119   background-color: #5cacee;
120   font-size: 28rpx;
121   color: #fff;
122 }
123 
124 .dataBorder2 {
125   border-bottom: 2rpx solid #fff;
126 }
127 
128 .lefrBorder {
129   float: left;
130 }
131 
132 .nickText {
133   margin: 0vw 3vw;
134   display: inline-block;
135 }
136 
137 .homeId {
138   margin: 0vw 5vw;
139   color: #fff;
140   display: inline-block;
141 }
142 
143 .homepassword {
144   text-align: center;
145   height: 13vw;
146   line-height: 13vw;
147   font-size: 26rpx;
148 }
149 
150 .homeBorder1 {
151   height: 16vw;
152   line-height: 14vw;
153   font-size: 26rpx;
154 }
155 
156 .homeinput {
157   border-top: 2rpx solid #ccc;
158   border-bottom: 2rpx solid #ccc;
159   width: 88%;
160   margin: 0 auto;
161   height: 12vw;
162 }
163 
164 .qx {
165   float: left;
166   height: 12vw;
167   line-height: 12vw;
168   width: 50%;
169   background-color: #f3951b;
170   font-size: 28rpx;
171   color: #fff;
172   text-align: center;
173 }
174 
175 .ensure {
176   float: left;
177   height: 12vw;
178   line-height: 12vw;
179   width: 50%;
180   background-color: #3baeda;
181   font-size: 28rpx;
182   color: #fff;
183   text-align: center;
184 }
 1  data: {
 2     hommer: [{
 3       id: 0,
 4       name: '1',
 5       onClick: false,
 6       hommerZ: [{
 7         id: 0,
 8         namee: '11',
 9       }]
10     }, {
11       id: 1,
12       name: '2',
13       onClick: false,
14       hommerZ: [{
15         id: 1,
16         namee: '12',
17       }]
18     }, {
19       id: 2,
20       name: '2',
21       onClick: false,
22       hommerZ: [{
23         id: 3,
24         namee: '13',
25       }]
26     }, {
27       id: 3,
28       name: '3',
29       onClick: false,
30       hommerZ:[{
31         id: 4,
32         namee: '141',
33       }]
34     }, {
35       id: 4,
36       name: '4',
37       onClick: false,
38       hommerZ: [{
39         id: 5,
40         namee: '51',
41       }]
42     }, {
43       id: 5,
44       name: '45',
45       onClick: false,
46       hommerZ: [{
47         id: 6,
48         namee: '61',
49       }]
50     }],
51 
52   },
53   onTap: function(e) {
54     var key = e.currentTarget.dataset.ide;
55     // console.log(key);
56     var hommer = this.data.hommer;
57     hommer[key].onClick = !hommer[key].onClick;
58     this.setData({
59       hommer
60     })
61   },

暂时只有这么多,只能是上下级的一个数组,非上下级的数据弄了半天,在点击多个 显示的时候总是只渲染一个,还有待研究,代码无路查为境,复制粘贴乐翻天..

猜你喜欢

转载自www.cnblogs.com/yuan-xiaohai/p/12176712.html