源码搜藏网

1.   <view class="detail">
2.     <view class="content">
3.       <view class="menu-container">
4.         <scroll-view scroll-y="true" class="scroll-view" scroll-into-view="head-{{indexSize}}">
5.           <view class="scroll-view-ul">   
6.  
7.           <block wx:for="{{detail}}" wx:for-item="item" wx:key="index" id="head-{{index}}">
8.               <view class="scroll-view-item {{indexSize === index?'active':''}}"   bindtap="scrollTo" data-index="{{index}}">{{item.title}}
9.               </view>
10.             </block>
11.           </view>
12.         </scroll-view>
13.       </view>
14.  
15.       <swiper indicator-dots='true' class="detail-container" bindchange="change" data-index="{{index}}" current="{{indexSize}}"
16.         indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" duration="{{duration}}">
17.         <swiper-item wx:for="{{detail}}" wx:for-item="item" wx:key="index">
18.           <scroll-view scroll-y="true" class=" market-scroll-list">
19.  
20.             <view class="title">{{detail[indexSize].title}} </view>
21.  
22.             <a wx:for="{{detail[indexSize].list}}" wx:key="index" wx:key="index" item="item"
23.               key="key">
24.               <view class="inner">
25.                 <view class="cover">
26.                   <view class="cover-img"></view> 
27.                 </view>
28.                 <view class="info overflow">
29.                   <view class="info-title overflow">{{item.title}}</view>
30.                   <view class="info-subtitle overflow">{{item.subtitle}}</view>
31.                   <view class="info-desc overflow">{{item.title}}</view>
32.                 </view>
33.                 <view class="num">
34.                   <text class="text">数量：999</text>
35.                 </view>
36.               </view>
37.             </a>
38.  
39.           </scroll-view>
40.         </swiper-item>
41.  
42.       </swiper>
43.  
44.     </view>
45.   </view>
46.  

1. .overflow {
2. overflow: hidden;
3. text-overflow: ellipsis;
4. white-space: nowrap;
5. width: 100%;
6. }
7.  
8. .content {
9. display: flex;
10. width: 100%;
11. position: absolute;
12. bottom: 0rpx;
13. left: 0;
14. top: 0;
15. overflow: hidden;
16. }
17. .menu-container {
18. width: 160rpx;
19. flex: 0 0 160rpx;
20. background: #f6f6f6;
21. }
22. .detail-container {
23. flex: 1;
24. height: 100%;
25. }
26.  
27. .scroll-view {
28. width: 100%;
29. height: 100%;
30. }
31. .scroll-view-ul {
32. width: 100%;
33. height: 100%;
34. }
35. .scroll-view-item {
36. height: 110rpx;
37. width: 100%;
38. font-size: 24rpx;
39. color: #666;
40. border-left: 8rpx solid transparent;
41. display: flex;
42. align-items: center;
43. justify-content: center;
44. position: relative;
45. }
46. .scroll-view-item:after {
47. content: '';
48. left: 0;
49. right: 0;
50. bottom: 0;
51. height: 1px;
52. background-color: #dfdfdf;
53. transform: scaleY(0.5);
54. position: absolute;
55. }
56. .active {
57. background: #ffffff;
58. color: #fe3e62;
59. border-left: 8rpx solid #fe3e62;
60. }
61.  
62.  
63.  
64. .market-scroll-list {
65. height: 100%;
66. }
67. .title {
68. height: 55rpx;
69. background-color: #f6f6f6;
70. border-left: 6rpx solid #dfdfdf;
71. padding-left: 25rpx;
72. line-height: 55rpx;
73. }
74. .inner {
75. display: flex;
76. padding: 30rpx;
77. position: relative;
78. }
79. .inner:after {
80.   content: '';
81.   left: 30rpx;
82.   right: 0;
83.   bottom: 0;
84.   height: 1px;
85.   background-color: #dfdfdf;
86.   transform: scaleY(0.5);
87.   position: absolute;
88. }
89. .cover {
90.   width: 100rpx;
91.   height: 100rpx;
92.   border: 1px solid #dfdfdf;
93.   background: #f6f6f6;
94.   padding: 20rpx;
95.  
96. }
97.   .cover-img {
98.     width: 100%;
99.     height: 100%;
100.     background-color: red;
101.   }
102. .info {
103.   flex: 1;
104.   padding: 0 30rpx;
105.   font-size: 0;
106. }
107.   .info-title {
108.     color: #333;
109.     font-size: 26rpx;
110.   }
111.   .info-subtitle {
112.     color: #999999;
113.     font-size: 20rpx;
114.     margin-top: -3rpx;
115.   }
116.   .info-desc {
117.     color: #666666;
118.     font-size: 22rpx;
119.     margin-top: 5rpx;
120.   }
121. .num {
122.   width: 120rpx;
123.   position: relative;
124. }
125.     .text {
126.     position: absolute;
127.     bottom: 0;
128.     font-size: 22rpx;
129.     color: #666;
130.   }

1. // pages/test/test.js
2. Page({
3.  
4.   /**
5.    * 页面的初始数据
6.    */
7.   data : {
8.     indexSize: 0,
9.     indicatorDots: false,
10.     autoplay: false,
11.     duration: 0, //可以控制动画
12.     list: '',
13.     detail: [
14.       {
15.         id: 1,
16.         title: '宴会舞台区',
17.         list: [
18.           {
19.             title: '舞台truss架子',
20.             subtitle: '坚固安全 质地优质',
21.           },
22.           {
23.             title: '背景架',
24.             subtitle: '专业调配 质量保证',
25.           },
26.           {
27.             title: '浪漫星空',
28.             subtitle: '营造温馨浪漫感',
29.           },
30.           {
31.             title: '欧式吊幔',
32.             subtitle: '低调奢华 高端品质',
33.           },
34.           {
35.             title: '桁架',
36.             subtitle: '背景支架 坚实牢固',
37.           },
38.           {
39.             title: '精美珠光地毯',
40.             subtitle: '珠光闪耀 高端时尚',
41.           },
42.           {
43.             title: '梦幻水晶灯',
44.             subtitle: '奢华璀璨 高贵典雅',
45.           },
46.           {
47.             title: '华丽玫瑰花',
48.             subtitle: '精致浪漫 时尚优雅',
49.           },
50.           {
51.             title: '精美藤蔓',
52.             subtitle: '线条优美 浪漫情调',
53.           },
54.           {
55.             title: '主题背景板',
56.             subtitle: '高贵圣洁 华丽梦幻',
57.           },
58.           {
59.             title: '梦幻软光灯带',
60.             subtitle: '光芒璀璨 增添氛围',
61.           },
62.           {
63.             title: '欧式雕花柱',
64.             subtitle: '雕刻精细 增添立体感',
65.           },
66.           {
67.             title: '梦幻天使',
68.             subtitle: '人间精灵 守护爱情',
69.           },
70.           {
71.             title: '梦幻蜡烛',
72.             subtitle: '温馨烛光 灵动火苗',
73.           },
74.           {
75.             title: '欧式罗马花盆',
76.             subtitle: '精致浪漫 时尚优雅',
77.           },
78.           {
79.             title: '欧式罗马柱',
80.             subtitle: '尽显欧式奢华与典雅',
81.           },
82.           {
83.             title: '欧式唯美花艺',
84.             subtitle: '梦幻色调 唯美大气',
85.           },
86.         ],
87.       },
88.       {
89.         id: 2,
90.         title: 'T台过道区',
91.         list: [
92.           {
93.             title: '幸福之路',
94.             subtitle: '唯美浪漫 时尚大气',
95.           },
96.           {
97.             title: '台阶装置',
98.             subtitle: '唯美浪漫 时尚大气',
99.           },
100.           {
101.             title: '时尚小舞台',
102.             subtitle: '精致浪漫 凸显主题',
103.           },
104.           {
105.             title: '精美珠光地毯',
106.             subtitle: '珠光闪耀 高端大气',
107.           },
108.           {
109.             title: '梦幻水晶灯',
110.             subtitle: '奢华璀璨 高贵典雅',
111.           },
112.           {
113.             title: '欧式罗马柱',
114.             subtitle: '尽显欧式奢华与典雅',
115.           },
116.           {
117.             title: '欧式罗马花盆',
118.             subtitle: '高雅奢华 彰显品味',
119.           },
120.           {
121.             title: '梦幻蜡烛',
122.             subtitle: '温馨烛光 灵动火苗',
123.           },
124.           {
125.             title: '梦幻天使',
126.             subtitle: '人间精灵 守护爱情',
127.           },
128.           {
129.             title: '欧式唯美花艺',
130.             subtitle: '梦幻色调 唯美大气',
131.           },
132.           {
133.             title: '欧式浪漫花球',
134.             subtitle: '色彩搭配 增添氛围',
135.           },
136.         ],
137.       },
138.       {
139.         id: 3,
140.         title: '宴会餐桌区',
141.         list: [
142.           {
143.             title: '主题桌布',
144.             subtitle: '高贵色调 舒适柔软',
145.           },
146.           {
147.             title: '欧式吊幔桌围',
148.             subtitle: '低调奢华 高端品质',
149.           },
150.           {
151.             title: '欧式竹节椅',
152.             subtitle: '奢华享受 高贵低调',
153.           },
154.           {
155.             title: '欧式椅背纱',
156.             subtitle: '唯美梦幻 轻盈飘逸',
157.           },
158.           {
159.             title: '欧式主桌花',
160.             subtitle: '唯美大气 高贵华丽',
161.           },
162.           {
163.             title: '梦幻蜡烛',
164.             subtitle: '温馨时尚 精致梦幻',
165.           },
166.           {
167.             title: '欧式罗马柱',
168.             subtitle: '尽显欧式奢华与典雅',
169.           },
170.           {
171.             title: '金色欧式烛台',
172.             subtitle: '高贵奢华 彰显品味',
173.           },
174.           {
175.             title: '欧式客桌花',
176.             subtitle: '优雅别致 精美独特',
177.           },
178.           {
179.             title: '欧式珠链',
180.             subtitle: '高雅奢华 彰显品味',
181.           },
182.           {
183.             title: '精美椅背蝴蝶结',
184.             subtitle: '小巧精致 凸显主题',
185.           },
186.           {
187.             title: '浪漫花瓣',
188.             subtitle: '营造气氛 增加层次',
189.           },
190.           {
191.             title: '主题桌卡',
192.             subtitle: '主题风格 精美细节',
193.           },
194.           {
195.             title: '主题席卡',
196.             subtitle: '主题风格 精美细节',
197.           },
198.         ],
199.       },
200.       {
201.         id: 4,
202.         title: '迎宾合影区',
203.         list: [
204.           {
205.             title: '背景架',
206.             subtitle: '专业调配 质量保证',
207.           },
208.           {
209.             title: '主题布幔',
210.             subtitle: '丝质柔软 色彩鲜艳',
211.           },
212.           {
213.             title: '欧式吊幔',
214.             subtitle: '低调奢华 高端品质',
215.           },
216.           {
217.             title: '主题背景板',
218.             subtitle: '高贵圣洁 华丽梦幻',
219.           },
220.           {
221.             title: '欧式雕花栅栏',
222.             subtitle: '雕刻精美 增添氛围',
223.           },
224.           {
225.             title: '时尚小舞台',
226.             subtitle: '精致浪漫 凸显主题',
227.           },
228.           {
229.             title: '精美地毯',
230.             subtitle: '高贵色调 舒适柔软',
231.           },
232.           {
233.             title: '浪漫白鸽',
234.             subtitle: '灵动活泼 寓意美好',
235.           },
236.           {
237.             title: '欧式喷泉',
238.             subtitle: '高雅奢华 彰显品味',
239.           },
240.           {
241.             title: '欧式唯美花艺',
242.             subtitle: '色彩搭配 增添氛围',
243.           },
244.           {
245.             title: '欧式罗马花盆',
246.             subtitle: '高雅奢华 彰显品味',
247.           },
248.           {
249.             title: '欧式罗马柱',
250.             subtitle: '尽显欧式奢华与典雅',
251.           },
252.           {
253.             title: '梦幻天使',
254.             subtitle: '人间精灵 守护爱情',
255.           },
256.           {
257.             title: '梦幻蜡烛',
258.             subtitle: '温馨时尚 精致梦幻',
259.           },
260.           {
261.             title: '梦幻云朵棉',
262.             subtitle: '营造梦幻视觉感',
263.           },
264.         ],
265.       },
266.       {
267.         id: 5,
268.         title: '迎宾签到区',
269.         list: [
270.           {
271.             title: '背景架',
272.             subtitle: '专业调配 质量保证',
273.           },
274.           {
275.             title: '主题布幔',
276.             subtitle: '丝质柔软 色彩鲜艳',
277.           },
278.           {
279.             title: '欧式吊幔',
280.             subtitle: '低调奢华 高端品质',
281.           },
282.           {
283.             title: '主题背景板',
284.             subtitle: '高贵圣洁 华丽梦幻',
285.           },
286.           {
287.             title: '主题桌布',
288.             subtitle: '丝质柔软 色彩鲜艳',
289.           },
290.           {
291.             title: '复古香水瓶',
292.             subtitle: '高贵优雅 浪漫情调',
293.           },
294.           {
295.             title: '复古首饰盒',
296.             subtitle: '蕴含着典雅的贵族风情',
297.           },
298.           {
299.             title: '欧式罗马花盆',
300.             subtitle: '高雅奢华 彰显品味',
301.           },
302.           {
303.             title: '欧式奢华烛台',
304.             subtitle: '欧式浪漫 奢华品质',
305.           },
306.           {
307.             title: '金色欧式烛台',
308.             subtitle: '高贵奢华 彰显品味',
309.           },
310.           {
311.             title: '梦幻天使小摆件',
312.             subtitle: '人间精灵 守护爱情',
313.           },
314.           {
315.             title: '复古留声机',
316.             subtitle: '色调高雅 回味经典',
317.           },
318.           {
319.             title: '欧式唯美花艺',
320.             subtitle: '色彩搭配 增添氛围',
321.           },
322.           {
323.             title: '梦幻蜡烛',
324.             subtitle: '温馨时尚 精致梦幻',
325.           },
326.           {
327.             title: '欧式复古罗马花盆',
328.             subtitle: '高雅奢华 彰显品味',
329.           },
330.           {
331.             title: '欧式雕花相框',
332.             subtitle: '高雅奢华 精雕细琢',
333.           },
334.           {
335.             title: '华丽玫瑰花',
336.             subtitle: '精致浪漫 时尚优雅',
337.           },
338.           {
339.             title: '精美藤蔓',
340.             subtitle: '线条优美 浪漫情调',
341.           },
342.           {
343.             title: '欧式雕花栅栏',
344.             subtitle: '雕刻精美 增添氛围',
345.           },
346.           {
347.             title: '复古蝴蝶',
348.             subtitle: '灵动优美 复古时尚',
349.           },
350.           {
351.             title: '主题签到笔',
352.             subtitle: '主题搭配 细节精致',
353.           },
354.           {
355.             title: '主题签到本',
356.             subtitle: '精美独特 主题搭配',
357.           },
358.           {
359.             title: '梦幻水晶灯',
360.             subtitle: '奢华璀璨 高贵典雅',
361.           },
362.           {
363.             title: '主题迎宾牌',
364.             subtitle: '独特设计 主题展示',
365.           },
366.           {
367.             title: '精美画架',
368.             subtitle: '欧式风格 完美搭配',
369.           },
370.           {
371.             title: '主题席位牌',
372.             subtitle: '主题搭配 细节精致',
373.           },
374.         ],
375.       },
376.       {
377.         id: 6,
378.         title: '迎宾甜品区',
379.         list: [
380.           {
381.             title: '背景架',
382.             subtitle: '专业调配 质量保证',
383.           },
384.           {
385.             title: '主题布幔',
386.             subtitle: '丝质柔软 色彩鲜艳',
387.           },
388.           {
389.             title: '欧式吊幔',
390.             subtitle: '低调奢华 高端品质',
391.           },
392.           {
393.             title: '主题背景板',
394.             subtitle: '高贵圣洁 华丽梦幻',
395.           },
396.           {
397.             title: '梦幻logo字母',
398.             subtitle: '时尚新颖 温馨梦幻',
399.           },
400.           {
401.             title: '复古长条桌',
402.             subtitle: '典雅简约 华丽低调',
403.           },
404.           {
405.             title: '欧式雕花圆桌',
406.             subtitle: '精美雕花 端庄大气',
407.           },
408.           {
409.             title: '欧式实木雕花桌',
410.             subtitle: '浓厚的复古贵族气息',
411.           },
412.           {
413.             title: '梦幻水晶灯',
414.             subtitle: '奢华璀璨 高贵典雅',
415.           },
416.           {
417.             title: '复古首饰盒',
418.             subtitle: '蕴含着典雅的贵族风情',
419.           },
420.           {
421.             title: '精致甜品架',
422.             subtitle: '贴合主题 精致浪漫',
423.           },
424.           {
425.             title: '精致甜品盘',
426.             subtitle: '贴合主题 精致浪漫',
427.           },
428.           {
429.             title: '欧式雕花茶具',
430.             subtitle: '彰显欧式贵族风情',
431.           },
432.           {
433.             title: '欧式雕花椅',
434.             subtitle: '色调高雅 华丽复古',
435.           },
436.           {
437.             title: '复古小提琴',
438.             subtitle: '优雅别致 精美独特',
439.           },
440.           {
441.             title: '欧式唯美花艺',
442.             subtitle: '色彩搭配 增添氛围',
443.           },
444.           {
445.             title: '欧式罗马花盆',
446.             subtitle: '高雅奢华 彰显品味',
447.           },
448.           {
449.             title: '欧式罗马柱',
450.             subtitle: '尽显欧式奢华与典雅',
451.           },
452.           {
453.             title: '复古书本',
454.             subtitle: '复古文艺 经典传承',
455.           },
456.           {
457.             title: '梦幻蜡烛',
458.             subtitle: '温馨时尚 精致梦幻',
459.           },
460.           {
461.             title: '梦幻纱幔',
462.             subtitle: '唯美梦幻 轻盈飘逸',
463.           },
464.           {
465.             title: '优质插花网格',
466.             subtitle: '造型多变 主题搭配',
467.           },
468.           {
469.             title: '浪漫瀑布花',
470.             subtitle: '欧式浪漫 灵动优雅',
471.           },
472.           {
473.             title: '浪漫花瓣',
474.             subtitle: '营造气氛 增加层次',
475.           },
476.         ],
477.       },
478.       {
479.         id: 7,
480.         title: '花艺设计区',
481.         list: [
482.           {
483.             title: '追光灯',
484.             subtitle: '新娘手捧 传递幸福',
485.           },
486.           {
487.             title: '精美胸花',
488.             subtitle: '胸前装饰 精致小巧',
489.           },
490.           {
491.             title: '精美腕花',
492.             subtitle: '手腕花艺 花香相伴',
493.           },
494.           {
495.             title: '精美车头花',
496.             subtitle: '婚车头车精美花艺',
497.           },
498.         ],
499.       },
500.       {
501.         id: 9,
502.         title: '灯光舞美',
503.         list: [
504.           {
505.             title: '追光灯',
506.             subtitle: '突出中心 画龙点睛',
507.           },
508.           {
509.             title: '光束灯',
510.             subtitle: '光束集中 梦幻氛围',
511.           },
512.           {
513.             title: 'LED par灯',
514.             subtitle: '环境染色 烘托气氛',
515.           },
516.           {
517.             title: 'LED洗墙灯',
518.             subtitle: '渲染背景 增强效果',
519.           },
520.           {
521.             title: 'Par 64',
522.             subtitle: '基本光源 整体照明',
523.           },
524.           {
525.             title: '薄雾机',
526.             subtitle: '营造氛围 集中光束',
527.           },
528.         ],
529.       },
530.       {
531.         id: 10,
532.         title: '婚礼执行',
533.         list: [
534.           {
535.             title: '婚礼管家',
536.             subtitle: '专业贴心的统筹服务',
537.           },
538.           {
539.             title: '婚礼执行',
540.             subtitle: '呈现婚礼完美现场',
541.           },
542.           {
543.             title: '花艺指导',
544.             subtitle: '用艺术的视觉呈现花之美',
545.           },
546.           {
547.             title: '婚礼管家',
548.             subtitle: '专业贴心的统筹服务',
549.           },
550.           {
551.             title: '婚礼执行',
552.             subtitle: '呈现婚礼完美现场',
553.           },
554.           {
555.             title: '花艺指导',
556.             subtitle: '用艺术的视觉呈现花之美',
557.           },
558.           {
559.             title: '婚礼执行',
560.             subtitle: '呈现婚礼完美现场',
561.           },
562.           {
563.             title: '花艺指导',
564.             subtitle: '用艺术的视觉呈现花之美',
565.           },
566.           {
567.             title: '灯光指导',
568.             subtitle: '营造最梦幻的婚礼气氛',
569.           },
570.         ],
571.       },
572.     ],
573.   },
574.   change(e) {
575.     this.setData({
576.       indexSize: e.detail.current
577.     })
578.   },
579.   scrollTo(e) {
580.     this.setData({
581.       indexSize: e.target.dataset.index
582.     })
583.   },
584.  
585.   /**
586.    * 生命周期函数--监听页面加载
587.    */
588.   onLoad: function (options) {
589.  
590.   },
591.  
592.   /**
593.    * 生命周期函数--监听页面初次渲染完成
594.    */
595.   onReady: function () {
596.  
597.   },
598.  
599.   /**
600.    * 生命周期函数--监听页面显示
601.    */
602.   onShow: function () {
603.  
604.   },
605.  
606.   /**
607.    * 生命周期函数--监听页面隐藏
608.    */
609.   onHide: function () {
610.  
611.   },
612.  
613.   /**
614.    * 生命周期函数--监听页面卸载
615.    */
616.   onUnload: function () {
617.  
618.   },
619.  
620.   /**
621.    * 页面相关事件处理函数--监听用户下拉动作
622.    */
623.   onPullDownRefresh: function () {
624.  
625.   },
626.  
627.   /**
628.    * 页面上拉触底事件的处理函数
629.    */
630.   onReachBottom: function () {
631.  
632.   },
633.  
634.   /**
635.    * 用户点击右上角分享
636.    */
637.   onShareAppMessage: function () {
638.  
639.   }
640. })