JSDM

HTML

 
1
<div id="wyy">
2
  <h2 class="h5-hotmore-h">我的分类</h2>
3
  <div class="h5-hotmore-con" :class="{'h5-hcon-edit':edit}">
4
    <a @click="clickChannel(weibo, $index, c)" class="h5-hcon-btn disabled"  v-for="c in weibo" v-if="c.default_add" transition="show-channel">
5
      <span class="m-text-cut">{{c.name}}<i class="m-font m-font-close" v-if="!c.must_show"></i>
6
      </span>
7
    </a>
8
  </div>
9
  <h2 class="h5-hotmore-h">点击添加分类</h2>
10
  <div class="h5-hotmore-con">
11
    <a @click="clickChannel(weibo, $index, c)" class="h5-hcon-btn" v-for="c in weibo" v-if="!c.default_add" transition="show-channel">
12
      <span class="m-text-cut">{{c.name}}<i class="m-font m-font-close"></i></span>
13
    </a>
14
  </div>
15
</div>

CSS

xxxxxxxxxx
126
 
1
.m-top-nav .nav-item.center {
2
  text-align:center;
3
}
4
.show-channel-list-transition {
5
  transition:all .3s ease;
6
  overflow:hidden;
7
}
8
.show-channel-list-enter,.show-channel-list-leave {
9
  opacity:0;
10
  transform:translateY(-100%);
11
}
12
.show-channel-transition {
13
  transition:all .3s ease;
14
}
15
.show-channel-enter,.show-channel-leave {
16
  opacity:0;
17
}
18
/*更多面板*/
19
  .h5-more-edit {
20
  height:100%;
21
  background-color:rgba(255,255,255,1);
22
  position:absolute;
23
  top:0;
24
  left:0;
25
  right:0;
26
  bottom:0;
27
  z-index:9;
28
}
29
.h5-hotmorebox {
30
  position:relative;
31
  z-index:10;
32
  padding-top:2.25rem;
33
}
34
.h5-hotmore-top {
35
  position:fixed;
36
  left:0;
37
  top:0;
38
  width:100%;
39
  box-sizing:border-box;
40
  display:block;
41
  line-height:1.25rem;
42
  overflow:hidden;
43
  padding:0.5rem 0.75rem;
44
}
45
.h5-hotmore-top .m-font {
46
  float:right;
47
}
48
.h5-hotmore-top .m-font {
49
  color:#c9c9c9;
50
}
51
.h5-arrow-up {
52
  -webkit-transform:rotate(45deg);
53
  transform:rotate(45deg);
54
}
55
.h5-hm-btn {
56
  width:2.625rem;
57
  height:1.125rem;
58
  border:solid 1px #ff8200;
59
  text-align:center;
60
  line-height:1.125rem;
61
  color:#ff8200;
62
  font-size:0.75rem;
63
  border-radius:50px;
64
  margin:-0.1875rem .3125rem 0 0;
65
  float:right;
66
}
67
.h5-hotmore-con {
68
  font-size:0;
69
  letter-spacing:-6px;
70
  padding:0.8125rem 1.125rem;
71
}
72
a.h5-hcon-btn,.h5-hcon-btn,.h5-hcon-fbtn {
73
  width:25%;
74
  display:inline-block;
75
  font-size:0.875rem;
76
  color:#333333;
77
  text-align:center;
78
  height:1.875rem;
79
  line-height:1.875rem;
80
  letter-spacing:normal;
81
  box-sizing:border-box;
82
  padding:0 0.3125rem;
83
  margin-bottom:0.9375rem;
84
  position:relative;
85
}
86
.h5-hcon-btn.m-cur span,.h5-hcon-fbtn.m-cur span,.h5-hcon-btn.m-cur.disabled span {
87
  color:#ff8200;
88
}
89
.h5-hcon-btn span,.h5-hcon-fbtn span {
90
  border:solid 1px #cccccc;
91
  border-radius:0.1875rem;
92
  display:block;
93
}
94
.h5-hcon-edit .h5-hcon-btn span {
95
  border:dashed 1px #ccc;
96
}
97
.h5-hcon-edit .disabled span {
98
  color:#aeaeae;
99
}
100
.h5-hcon-btn .m-font-close {
101
  position:absolute;
102
  cursor:pointer;
103
  top:0;
104
  left:0.3125rem;
105
  display:block;
106
  width:0.71875rem;
107
  height:0.71875rem;
108
  line-height:0.71875rem;
109
  background-color:#ccc;
110
  font-size:0.5rem;
111
  text-align:center;
112
  overflow:hidden;
113
  display:none;
114
}
115
.h5-hcon-btn .m-font-close::before {
116
  font-size:1em;
117
  color:#fff;
118
}
119
.h5-hcon-edit .h5-hcon-btn .m-font-close {
120
  display:block;
121
}
122
.h5-hotmore-h {
123
  padding:0 1.125rem 0 .75rem;
124
  font-size:0.875rem;
125
  color:#636363;
126
}
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
312
 
1
new Vue({
2
  el: "#wyy",
3
  methods: {
4
    clickChannel($list, $index, $this) {
5
      if (!$this.default_add || !$this.must_show) {
6
        const temp = $list.splice($index, 1)[0];
7
        temp.default_add = (temp.default_add + 1) % 2;
8
         Vue.nextTick(function () {
9
           $list.push(temp);
10
         })
11
      }
12
    },
13
  },
14
  data: {
15
    weibo: [{
16
      "id": "100803",
17
      "name": "推荐",
18
      "containerid": "100803",
19
      "scheme": "",
20
      "must_show": 1,
21
      "default_add": 1
22
    },
23
    {
24
      "id": "page_hot_list",
25
      "name": "榜单",
26
      "containerid": "100803_-_page_hot_list",
27
      "scheme": "",
28
      "must_show": 1,
29
      "default_add": 1
30
    },
31
    {
32
      "id": 128,
33
      "name": "萌宠",
34
      "containerid": "100803_ctg1_128_-_page_topics_ctg1__128",
35
      "scheme": "",
36
      "must_show": 0,
37
      "default_add": 1
38
    },
39
    {
40
      "id": 131,
41
      "name": "数码",
42
      "containerid": "100803_ctg1_131_-_page_topics_ctg1__131",
43
      "scheme": "",
44
      "must_show": 0,
45
      "default_add": 1
46
    },
47
    {
48
      "id": 93,
49
      "name": "旅游",
50
      "containerid": "100803_ctg1_93_-_page_topics_ctg1__93",
51
      "scheme": "",
52
      "must_show": 0,
53
      "default_add": 1
54
    },
55
    {
56
      "id": 91,
57
      "name": "美食",
58
      "containerid": "100803_ctg1_91_-_page_topics_ctg1__91",
59
      "scheme": "",
60
      "must_show": 0,
61
      "default_add": 1
62
    },
63
    {
64
      "id": 113,
65
      "name": "健康",
66
      "containerid": "100803_ctg1_113_-_page_topics_ctg1__113",
67
      "scheme": "",
68
      "must_show": 0,
69
      "default_add": 1
70
    },
71
    {
72
      "id": 5,
73
      "name": "情感",
74
      "containerid": "100803_ctg1_5_-_page_topics_ctg1__5",
75
      "scheme": "",
76
      "must_show": 0,
77
      "default_add": 1
78
    },
79
    {
80
      "id": 145,
81
      "name": "星座",
82
      "containerid": "100803_ctg1_145_-_page_topics_ctg1__145",
83
      "scheme": "",
84
      "must_show": 0,
85
      "default_add": 1
86
    },
87
    {
88
      "id": 102,
89
      "name": "综艺",
90
      "containerid": "100803_ctg1_102_-_page_topics_ctg1__102",
91
      "scheme": "",
92
      "must_show": 0,
93
      "default_add": 1
94
    },
95
    {
96
      "id": 97,
97
      "name": "动漫",
98
      "containerid": "100803_ctg1_97_-_page_topics_ctg1__97",
99
      "scheme": "",
100
      "must_show": 0,
101
      "default_add": 1
102
    },
103
    {
104
      "id": 2,
105
      "name": "明星",
106
      "containerid": "100803_ctg1_2_-_page_topics_ctg1__2",
107
      "scheme": "",
108
      "must_show": 0,
109
      "default_add": 1
110
    },
111
    {
112
      "id": 94,
113
      "name": "读书",
114
      "containerid": "100803_ctg1_94_-_page_topics_ctg1__94",
115
      "scheme": "",
116
      "must_show": 0,
117
      "default_add": 1
118
    },
119
    {
120
      "id": 144,
121
      "name": "军事",
122
      "containerid": "100803_ctg1_144_-_page_topics_ctg1__144",
123
      "scheme": "",
124
      "must_show": 0,
125
      "default_add": 1
126
    },
127
    {
128
      "id": 114,
129
      "name": "时尚美妆",
130
      "containerid": "100803_ctg1_114_-_page_topics_ctg1__114",
131
      "scheme": "",
132
      "must_show": 0,
133
      "default_add": 1
134
    },
135
    {
136
      "id": 146,
137
      "name": "音乐",
138
      "containerid": "100803_ctg1_146_-_page_topics_ctg1__146",
139
      "scheme": "",
140
      "must_show": 0,
141
      "default_add": 1
142
    },
143
    {
144
      "id": 3,
145
      "name": "科普",
146
      "containerid": "100803_ctg1_3_-_page_topics_ctg1__3",
147
      "scheme": "",
148
      "must_show": 0,
149
      "default_add": 1
150
    },
151
    {
152
      "id": 120,
153
      "name": "生活记录",
154
      "containerid": "100803_ctg1_120_-_page_topics_ctg1__120",
155
      "scheme": "",
156
      "must_show": 0,
157
      "default_add": 1
158
    },
159
    {
160
      "id": 100,
161
      "name": "电影",
162
      "containerid": "100803_ctg1_100_-_page_topics_ctg1__100",
163
      "scheme": "",
164
      "must_show": 0,
165
      "default_add": 1
166
    },
167
    {
168
      "id": 111,
169
      "name": "运动健身",
170
      "containerid": "100803_ctg1_111_-_page_topics_ctg1__111",
171
      "scheme": "",
172
      "must_show": 0,
173
      "default_add": 1
174
    },
175
    {
176
      "id": 200000,
177
      "name": "北京",
178
      "containerid": "100803_ctg1_200000_-_page_topics_ctg1__200000",
179
      "scheme": "",
180
      "must_show": 0,
181
      "default_add": 1
182
    },
183
    {
184
      "id": 9,
185
      "name": "创意征集",
186
      "containerid": "100803_ctg1_9_-_page_topics_ctg1__9",
187
      "scheme": "",
188
      "must_show": 0,
189
      "default_add": 1
190
    },
191
    {
192
      "id": 7,
193
      "name": "财经",
194
      "containerid": "100803_ctg1_7_-_page_topics_ctg1__7",
195
      "scheme": "",
196
      "must_show": 0,
197
      "default_add": 1
198
    },
199
    {
200
      "id": 123,
201
      "name": "美图",
202
      "containerid": "100803_ctg1_123_-_page_topics_ctg1__123",
203
      "scheme": "",
204
      "must_show": 0,
205
      "default_add": 0
206
    },
207
    {
208
      "id": 116,
209
      "name": "育儿",
210
      "containerid": "100803_ctg1_116_-_page_topics_ctg1__116",
211
      "scheme": "",
212
      "must_show": 0,
213
      "default_add": 1
214
    },
215
    {
216
      "id": 133,
217
      "name": "校园",
218
      "containerid": "100803_ctg1_133_-_page_topics_ctg1__133",
219
      "scheme": "",
220
      "must_show": 0,
221
      "default_add": 1
222
    },
223
    {
224
      "id": 98,
225
      "name": "体育",
226
      "containerid": "100803_ctg1_98_-_page_topics_ctg1__98",
227
      "scheme": "",
228
      "must_show": 0,
229
      "default_add": 1
230
    },
231
    {
232
      "id": 1,
233
      "name": "社会",
234
      "containerid": "100803_ctg1_1_-_page_topics_ctg1__1",
235
      "scheme": "",
236
      "must_show": 0,
237
      "default_add": 1
238
    },
239
    {
240
      "id": 117,
241
      "name": "汽车",
242
      "containerid": "100803_ctg1_117_-_page_topics_ctg1__117",
243
      "scheme": "",
244
      "must_show": 0,
245
      "default_add": 1
246
    },
247
    {
248
      "id": 147,
249
      "name": "政务",
250
      "containerid": "100803_ctg1_147_-_page_topics_ctg1__147",
251
      "scheme": "",
252
      "must_show": 0,
253
      "default_add": 0
254
    },
255
    {
256
      "id": 138,
257
      "name": "科技",
258
      "containerid": "100803_ctg1_138_-_page_topics_ctg1__138",
259
      "scheme": "",
260
      "must_show": 0,
261
      "default_add": 0
262
    },
263
    {
264
      "id": 137,
265
      "name": "房产家居",
266
      "containerid": "100803_ctg1_137_-_page_topics_ctg1__137",
267
      "scheme": "",
268
      "must_show": 0,
269
      "default_add": 0
270
    },
271
    {
272
      "id": 101,
273
      "name": "电视剧",
274
      "containerid": "100803_ctg1_101_-_page_topics_ctg1__101",
275
      "scheme": "",
276
      "must_show": 0,
277
      "default_add": 0
278
    },
279
    {
280
      "id": 126,
281
      "name": "游戏",
282
      "containerid": "100803_ctg1_126_-_page_topics_ctg1__126",
283
      "scheme": "",
284
      "must_show": 0,
285
      "default_add": 0
286
    },
287
    {
288
      "id": 140,
289
      "name": "笑话",
290
      "containerid": "100803_ctg1_140_-_page_topics_ctg1__140",
291
      "scheme": "",
292
      "must_show": 0,
293
      "default_add": 1
294
    },
295
    {
296
      "id": 142,
297
      "name": "文化艺术",
298
      "containerid": "100803_ctg1_142_-_page_topics_ctg1__142",
299
      "scheme": "",
300
      "must_show": 0,
301
      "default_add": 0
302
    },
303
    {
304
      "id": 6,
305
      "name": "公益",
306
      "containerid": "100803_ctg1_6_-_page_topics_ctg1__6",
307
      "scheme": "",
308
      "must_show": 0,
309
      "default_add": 0
310
    }]
311
  },
312
})
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................