子组件内用了3层循环后70*12*365次之后，巨卡无比？？？

ColdKiller

子组件内用了3层循环后，当引用该组件的stml页面打开之后，页面巨卡无比，有时候会导致APP闪退。该子组件calendar-date定义内容如下：

1. <template name="calendar-date">
   
2.         <view class="select-date">
   
3.                 <text style="display:none;">{{getDate}}</text>
   
4.                 <a-cell :__last="__last" :title="title" class="a-field-center" :required="required" center
   
5.                         placeholder={selectDate?'':placeholder} value={selectDate?selectDate:placeholder} @click="chooseDate()" />
   
6.                 <text class="list-item-right" @click="clearDate()" v-if="selectDate && clearAble">清空</text>
   
7.         </view>
   
8. </template>
   
9. 
   
10. <script>
    
11. import { syncModel } from "./avm-ui/utils";
    
12. export default {
    
13.         name: 'calendar-date',
    
14.         install() {
    
15.                 if (this.props["$value"]) {
    
16.                         syncModel.call(this);
    
17.                 }
    
18.                 this.initCanlendarData();
    
19.         },
    
20.         computed: {
    
21.                 getDate() {
    
22.                         if (this.value) {
    
23.                                 this.data.selectDate = this.value;
    
24.                                 this.initDateIndex();
    
25.                         } else {
    
26.                                 this.data.selectDate = "";
    
27.                         }
    
28.                         return this.value
    
29.                 },
    
30.         },
    
31.         props: {
    
32.                 value: {
    
33.                         default: () => ""
    
34.                 },
    
35.                 title: {
    
36.                         default: () => ""
    
37.                 },
    
38.                 required: {
    
39.                         default: () => false
    
40.                 },
    
41.                 __last: {
    
42.                         default: () => false
    
43.                 },
    
44.                 placeholder: {
    
45.                         default: () => ""
    
46.                 },
    
47.                 clearAble: {
    
48.                         default: () => false
    
49.                 },
    
50.                 readonly: {
    
51.                         default: () => false
    
52.                 },
    
53.         },
    
54.         data() {
    
55.                 return {
    
56.                         selectDate: "",
    
57.                         calendarData: [],
    
58.                         actives: [0, 0, 0]
    
59.                 }
    
60.         },
    
61.         methods: {
    
62.                 initDateIndex() {
    
63.                         let myDate = new Date();
    
64.                         let nowYear = myDate.getFullYear();
    
65.                         let year_index = 0;
    
66.                         let month_index = 0;
    
67.                         let day_index = 0;
    
68.                         if (this.data.selectDate) {
    
69.                                 let tmpDate = new Date(this.data.selectDate);
    
70.                                 let tmpYear = tmpDate.getFullYear();
    
71.                                 let tmpMonth = tmpDate.getMonth() + 1;
    
72.                                 let tmpDay = tmpDate.getDate();
    
73.                                 year_index = nowYear - tmpYear;
    
74.                                 month_index = tmpMonth - 1;
    
75.                                 day_index = tmpDay - 1;
    
76.                         } else {
    
77.                                 let tmpDate = new Date(myDate);
    
78.                                 let tmpYear = tmpDate.getFullYear();
    
79.                                 let tmpMonth = tmpDate.getMonth() + 1;
    
80.                                 let tmpDay = tmpDate.getDate();
    
81.                                 year_index = nowYear - tmpYear;
    
82.                                 month_index = tmpMonth - 1;
    
83.                                 day_index = tmpDay - 1;
    
84.                         }
    
85.                         this.data.actives = [year_index, month_index, day_index];
    
86.                 },
    
87.                 initCanlendarData() {
    
88.                         var dateArr = [];
    
89.                         let myDate = new Date();
    
90.                         let nowYear = myDate.getFullYear();
    
91.                         for (let year = nowYear; year > 1950; year--) {
    
92.                                 let tmp_year = {
    
93.                                         "name": year + "年",
    
94.                                         "title": year,
    
95.                                         "sub": []
    
96.                                 };
    
97.                                 let dateMonth = 12;
    
98.                                 if (year == nowYear) {
    
99.                                         dateMonth = (myDate.getMonth() + 1);
    
100.                                 }
     
101.                                 for (let month = 1; month <= dateMonth; month++) {
     
102.                                         let tmp_month = {
     
103.                                                 "name": month + "月",
     
104.                                                 "title": month,
     
105.                                                 "sub": []
     
106.                                         };
     
107.                                         let days = this.getDayNumByYearMoth(year, month);
     
108.                                         for (let day = 1; day <= days; day++) {
     
109.                                                 let tmp_day = {
     
110.                                                         "name": day + "日",
     
111.                                                         "title": day,
     
112.                                                         "sub": []
     
113.                                                 };
     
114.                                                 tmp_month.sub.push(tmp_day);
     
115.                                         }
     
116.                                         tmp_year.sub.push(tmp_month);
     
117.                                 }
     
118.                                 dateArr.push(tmp_year);
     
119.                         }
     
120.                         this.data.calendarData = dateArr;
     
121.                 },
     
122.                 //判断是否为闰年
     
123.                 isLeapYear(year) {
     
124.                         if ((year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0)) {
     
125.                                 return true
     
126.                         } else {
     
127.                                 return false
     
128.                         }
     
129.                 },
     
130.                 //计算每个月的天数
     
131.                 getDayNumByYearMoth(year, month) {
     
132.                         let day = 1;
     
133.                         switch (month) {
     
134.                                 case 1:
     
135.                                 case 3:
     
136.                                 case 5:
     
137.                                 case 7:
     
138.                                 case 8:
     
139.                                 case 10:
     
140.                                 case 12:
     
141.                                         day = 31;
     
142.                                         break
     
143.                                 case 4:
     
144.                                 case 6:
     
145.                                 case 9:
     
146.                                 case 11:
     
147.                                         day = 30;
     
148.                                         break;
     
149.                                 case 2:
     
150.                                         day = this.isLeapYear(year) ? 29 : 28;
     
151.                                         break;
     
152.                                 default:
     
153.                         }
     
154.                         return day
     
155.                 },
     
156.                 chooseDate() {
     
157.                         if (this.readonly) {
     
158.                                 return
     
159.                         }
     
160.                         let that = this;
     
161.                         var UIActionSelector = api.require('UIActionSelector');
     
162.                         UIActionSelector.open({
     
163.                                 datas: that.data.calendarData,
     
164.                                 layout: {
     
165.                                         row: 5,
     
166.                                         col: 3,
     
167.                                         height: 30,
     
168.                                         size: 16,
     
169.                                         sizeActive: 18,
     
170.                                         rowSpacing: 5,
     
171.                                         colSpacing: 10,
     
172.                                         maskBg: 'rgba(0,0,0,0.2)',
     
173.                                         bg: '#fff',
     
174.                                         color: '#888',
     
175.                                         colorActive: '#333',
     
176.                                         colorSelected: '#333'
     
177.                                 },
     
178.                                 animation: true,
     
179.                                 actives: that.data.actives,
     
180.                                 cancel: {
     
181.                                         text: '取消',
     
182.                                         size: 18,
     
183.                                         w: 90,
     
184.                                         h: 35,
     
185.                                         bg: '#fff',
     
186.                                         bgActive: '#ccc',
     
187.                                         color: '#8B0000',
     
188.                                         colorActive: '#fff'
     
189.                                 },
     
190.                                 ok: {
     
191.                                         text: '确定',
     
192.                                         size: 18,
     
193.                                         w: 90,
     
194.                                         h: 35,
     
195.                                         bg: '#fff',
     
196.                                         bgActive: '#ccc',
     
197.                                         color: '#1E90FF',
     
198.                                         colorActive: '#fff'
     
199.                                 },
     
200.                                 title: {
     
201.                                         text: that.props.placeholder,
     
202.                                         size: 18,
     
203.                                         h: 44,
     
204.                                         bg: '#fff',
     
205.                                         color: '#888'
     
206.                                 },
     
207.                                 fixedOn: api.frameName
     
208.                         }, function (ret, err) {
     
209.                                 if (ret && ret.eventType == "ok" && ret.selectedInfo) {
     
210.                                         let year = ret.selectedInfo[0].title;
     
211.                                         let month = ret.selectedInfo[1].title;
     
212.                                         if (month && month.toString().length == 1) {
     
213.                                                 month = "0" + month;
     
214.                                         }
     
215.                                         let day = ret.selectedInfo[2].title;
     
216.                                         if (day && day.toString().length == 1) {
     
217.                                                 day = "0" + day;
     
218.                                         }
     
219.                                         let date = year + "-" + month + "-" + day;
     
220.                                         that.data.selectDate = date;
     
221.                                         that.setValue(date);
     
222.                                         that.hideDate();
     
223.                                         that.fire('selectDate', {
     
224.                                                 date: date
     
225.                                         });
     
226.                                 }
     
227.                         });
     
228.                 },
     
229.                 showDate() {
     
230.                         var UIActionSelector = api.require('UIActionSelector');
     
231.                         UIActionSelector.show();
     
232.                 },
     
233.                 hideDate() {
     
234.                         var UIActionSelector = api.require('UIActionSelector');
     
235.                         UIActionSelector.hide();
     
236.                 },
     
237.                 setValue(value) {
     
238.                         if (this.$model) {
     
239.                                 this.$model.value = value;
     
240.                         }
     
241.                 },
     
242.                 clearDate() {
     
243.                         this.data.selectDate = "";
     
244.                         this.setValue("");
     
245.                         this.fire('selectDate', {
     
246.                                 date: ""
     
247.                         });
     
248.                 }
     
249.         }
     
250. }
     
251. </script>
     
252. <style scoped>
     
253. .select-date {
     
254.         flex-flow: row;
     
255.         align-items: center;
     
256.         align-content: space-between;
     
257. }
     
258. .list-item-right {
     
259.         flex: 1;
     
260.         font-size: 14px;
     
261.         color: #3c77fe;
     
262.         margin-left: auto;
     
263.         padding-left: 5px;
     
264.         width: 100%;
     
265.         box-sizing: border-box;
     
266.         border: none;
     
267.         text-align: left;
     
268. }
     
269. </style>

复制代码

技术咨询-特特

您好，是实际场景需要循环这么多次吗，这情况可能循环次数多，会造成卡顿

ColdKiller

技术咨询-特特 · 2022-11-17 12:45您好，是实际场景需要循环这么多次吗，这情况可能循环次数多，会造成卡顿

日期选择范围默认1950-2022，循环次数才306,600次，就卡顿的不行，请问下有什么好的解决方案么

技术咨询-F

ColdKiller · 2022-11-17 15:42日期选择范围默认1950-2022，循环次数才306,600次，就卡顿的不行，请问下有什么好的解决方案么

不引组件，单页面使用卡顿吗

至高吾·尚

ColdKiller · 2022-11-17 15:42日期选择范围默认1950-2022，循环次数才306,600次，就卡顿的不行，请问下有什么好的解决方案么

你好，你现在提供的页面代码里引用了js文件和其他自定义组件，但看你这个页面无法做进一步的分析，请把你的完整项目压缩一个zip包发上来，我们这边好进行进一步的分析，帮你去解决本次反馈的问题。

ColdKiller

技术咨询-F · 2022-11-17 16:17不引组件，单页面使用卡顿吗

也卡顿的，请问下这是渲染机制的问题么

ColdKiller

至高吾·尚 · 2022-11-17 18:36你好，你现在提供的页面代码里引用了js文件和其他自定义组件，但看你这个页面无法做进一步的分析，请把你的完整项目压缩一个zip包发上来，我们这边好进行进一步的分析，帮你去解决本次反馈的问题。 ...

现在的问题是单页面内使用，不在组件内使用，也是卡顿的很

技术咨询-F

ColdKiller · 2022-11-21 09:20也卡顿的，请问下这是渲染机制的问题么

可能嵌套标签太多层了吧，文档示例代码也是三级选择器，就没卡顿

至高吾·尚

ColdKiller · 2022-11-21 09:20现在的问题是单页面内使用，不在组件内使用，也是卡顿的很

你好，这样的虚对虚的沟通，很难帮你解决问题。建议你提供一下你的源码（如果项目敏感，可以写一个简单的demo），将整个demo的widget压缩成zip文件发出来就可以，我们技术这边可以运行一下demo，然后去进一步的定位帮你解决问题。

ColdKiller

至高吾·尚 · 2022-11-21 23:49你好，这样的虚对虚的沟通，很难帮你解决问题。建议你提供一下你的源码（如果项目敏感，可以写一个简单的demo），将整个demo的widget压缩成zip文件发出来就可以，我们技术这边可以运行一下demo，然后去进一步的定位 ...

已简化demo上传，请技术人员帮忙看下啥问题，万分感谢~~~~