子组件内用了3层循环后70*12*365次之后，巨卡无比？？？_用友YonBIP开发者社区

技术咨询-特特 · 回复于2022-11-23 15:03:20

这边发给楼上给给看下，在帖子里回复你

imo. · 回复于2022-11-23 18:35:02

scroll-view做循环，不卡才怪

至高吾·尚 · 回复于2022-11-25 03:29:11

本帖最后由至高吾·尚于 2022-11-27 22:13 编辑

ColdKiller · 2022-11-22 19:18已简化demo上传，请技术人员帮忙看下啥问题，万分感谢~~~~

你好，下载了你的demo，运行报错，简单看了一下，demo存在一些错误，比如引用路径错误，引用文件缺失等问题，还需要麻烦你自己提供一个可以运行的demo上来，否则无法运行，技术很难理解你的项目的需求点，问题点，没法进一步的帮您解决问题。个人建议您精简demo以后，先本地运行下，OK后再发上来，避免我们增加反复沟通的成本。或者您可以提供一下您这边想实现的需求目标，最好有一个UI样式图和需求业务逻辑的介绍，我们这边也可以看看是不是可以给您提供一个对应的示范demo

WX20221125-032446@2x.png

ColdKiller · 2022-11-29 14:16上传

至高吾·尚 · 2022-11-25 03:29你好，下载了你的demo，运行报错，简单看了一下，demo存在一些错误，比如引用路径错误，引用文件缺失等问题，还需要麻烦你自己提供一个可以运行的demo上来，否则无法运行，技术很难理解你的项目的需求点，问题点， ...

你好，demo已调整重新上传，之前上传的demo确实有引用文件缺失了。循环卡顿问题还请麻烦核实一下~

技术咨询-特特

这边把问题转给开发看了，等下开发回复

ColdKiller

技术咨询-特特 · 2022-12-6 17:15这边把问题转给开发看了，等下开发回复

好的辛苦了

至高吾·尚

本帖最后由至高吾·尚于 2022-12-7 14:12 编辑

你好，我看了提供的demo源码，并了解了实际的业务需求，现提供两种解决方案：

方案1：
将UIActionSelector.open接口中使用的datas数据源，由动态生成的对象，转化为引用静态的json文件，这样就避免了每次引用该子组件时，都先动态3层遍历的去计算datas的数据源，也就规避掉了你现在反馈的问题；
QQ20221207-134255@2x.png

方案2：
将UIActionSelector模块为UICustomPicker模块，该模块支持自定义每一个层级内容，各个层级之间的数据源是解耦的，这样就不用在最开始模块初始化的时候将全部的3层进行深度遍历了，只需要计算当前的层级就可以了。具体提供给你一个《30天，App开发从0到1》书籍中的一个时间选择器案例代码供你参考（见附件）

book_2_8_1.zip 下载附件

2022-12-7 14:01上传15.44 KB下载次数: 19

ColdKiller

至高吾·尚 · 2022-12-7 14:02你好，我看了提供的demo源码，并了解了实际的业务需求，现提供两种解决方案：

方案1：

好的，非常感谢技术人员的帮助。但是针对方案一的建议，已经尝试过把1950-2022年度的数据写入json文件，然后当页面载入的时候从这个json文件读取数据，仍然会出现卡顿的情况出现。方案二还在研究过程中。

ColdKiller

至高吾·尚 · 2022-12-7 14:02你好，我看了提供的demo源码，并了解了实际的业务需求，现提供两种解决方案：

方案1：

针对方案二，UICustomPicker组件使用存在样式和展示问题：
（1）时间展示范围选择的是1950-2022，结果展示时间不连续，分时间段展示；
（2）组件hide方法存在问题，使用过程中无效，且组件会跟着页面上下滚动，而不是定位到所需要的位置。

<template name="calendar-date">
<view>
<text style="display:none;">{{getDate}}</text>
<a-cell class="a-field" is-link arrowDirection="down" :required="required" :title="title" :__last="__last"
@click="chooseDate()">
<template _slot="value" class="field__body">
<text :class="selectDate?'field__value':'field__placeholder'">{{selectDate?selectDate:placeholder}}</text>
</template>
</a-cell>
</view>
</template>
<script>
import { syncModel } from "./avm-ui/utils";
export default {
name: 'calendar-date',
install() {
if (this.props["$value"]) {
syncModel.call(this);
}
},
computed: {
getDate() {
if (this.value) {
this.data.selectDate = this.value;
this.initDateIndex();
} else {
this.data.selectDate = "";
}
return this.value
},
},
props: {
value: {
default: () => ""
},
title: {
default: () => ""
},
required: {
default: () => false
},
__last: {
default: () => false
},
placeholder: {
default: () => ""
},
readonly: {
default: () => false
},
clearAble: {
default: () => false
},
},
data() {
return {
selectDate: "",
calendarData: [],
actives: [0, 0, 0],
vPickerId: null,
oSelectedData: null
}
},
methods: {
initDateIndex(){
let myDate = new Date();
let nowYear = myDate.getFullYear();
let year_index = 0;
let month_index = 0;
let day_index = 0;
if (this.data.selectDate) {
let tmpDate = new Date(this.data.selectDate);
let tmpYear = tmpDate.getFullYear();
let tmpMonth = tmpDate.getMonth() + 1;
let tmpDay = tmpDate.getDate();
year_index = nowYear - tmpYear;
month_index = tmpMonth - 1;
day_index = tmpDay - 1;
} else {
let tmpDate = new Date(myDate);
let tmpYear = tmpDate.getFullYear();
let tmpMonth = tmpDate.getMonth() + 1;
let tmpDay = tmpDate.getDate();
year_index = nowYear - tmpYear;
month_index = tmpMonth - 1;
day_index = tmpDay - 1;
}
this.data.actives = [year_index, month_index, day_index];
},
initDateData(){
let tNow = new Date();
let tYear = tNow.getFullYear(); // 获取当前年份
let tMonth = tNow.getMonth(); // 获取当前月份
let tDate = tNow.getDate(); // 获取当前日期
let tMinYear = 1950; // 可选最小时间，100年前
let tMaxYear = tYear; // 可选最大时间，100年后
let that = this;
var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.open({
rect: {
x: 30,
y: api.frameHeight / 2 - 170,
w: api.frameWidth - 60,
h: 135
},
styles: {
bg: 'rgba(61,61,61,0.0)', //（可选项）字符串类型；选中内容区域的背景，支持 rgb，rgba，#，图片路径（本地路径，fs://、widget://）；默认：'rgba(0,0,0,0)'
normalColor: '#959595', //（可选项）字符串类型；未选中内容的字体颜色，支持 rgb，rgba，#；默认：'#959595'
normalSize:15, //（可选项）数字类型；未选中内容字体大小；默认：15
selectedColor: '#3685dd', //（可选项）字符串类型；选中内容的字体颜色，支持 rgb，rgba，#；默认：'#3685dd'
disableSelectColor: '#EDEDED',//（可选项）字符串类型；不可选中项的字体颜色，支持 rgb，rgba，#；默认：'#EDEDED'
selectedSize: 28, //（可选项）数字类型；选中内容的字体大小；默认：36.0
tagColor: '#3685dd', //（可选项）字符串类型；内容标签的字体颜色，支持 rgb，rgba，# ；默认：'#3685dd'
tagSize: 12, //（可选项）数字类型；内容标签的字体大小；默认：12
tagMarginR:0, //（可选项）数字类型；标签距离当前picker的右边框的距离；默认：0
pickersWidth:[33, 33, 33] //（可选项）数组类型；picker所占模块宽度的百分比，不传时均分模块宽度，数组长度等于data数组的长度
},
data: [{
tag: '年',
scope: tMinYear + '-' + tMaxYear
}, {
tag: '月',
scope: '1-12'
}, {
tag: '日',
scope: '1-31'
}],
autoHide: false,
loop: true,
rows: 3,
fixedOn: api.frameName,
fixed: true
}, function(ret, err) {
if (ret) {
if('number' == typeof ret.id) {
that.data.vPickerId = ret.id; // 记录当前模块的ID
}
if('show' === ret.eventType) {
// 设置当前时间为默认值
var tDefault = [tYear,tMonth+1,tDate];
that.fnSetSelectedValue(tDefault);
}
if('selected' === ret.eventType) {
//判断选择值的合法性
let sDate = that.fnCheckSelectedValue(ret.data);
if(sDate) {
let nDate = new Date(sDate);
let year = nDate.getFullYear();
let month = nDate.getMonth();
if (month && month.toString().length == 1) {
month = "0" + month;
}
let day = nDate.getDate();
if (day && day.toString().length == 1) {
day = "0" + day;
}
let date = year + "-" + month + "-" + day;
that.data.selectDate = date;
that.setValue(date);
that.hideDate();
that.fire('selectDate', {
date: date
});
}
}
} else {
that.clearDate();
}
});
},
initDateIndex() {
let myDate = new Date();
let nowYear = myDate.getFullYear();
let year_index = 0;
let month_index = 0;
let day_index = 0;
if (this.data.selectDate) {
let tmpDate = new Date(this.data.selectDate);
let tmpYear = tmpDate.getFullYear();
let tmpMonth = tmpDate.getMonth() + 1;
let tmpDay = tmpDate.getDate();
year_index = nowYear - tmpYear;
month_index = tmpMonth - 1;
day_index = tmpDay - 1;
} else {
let tmpDate = new Date(myDate);
let tmpYear = tmpDate.getFullYear();
let tmpMonth = tmpDate.getMonth() + 1;
let tmpDay = tmpDate.getDate();
year_index = nowYear - tmpYear;
month_index = tmpMonth - 1;
day_index = tmpDay - 1;
}
this.data.actives = [year_index, month_index, day_index];
},
//判断是否为闰年
isLeapYear(year) {
if ((year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0)) {
return true
} else {
return false
}
},
//计算每个月的天数
getDayNumByYearMoth(year, month) {
let day = 1;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
day = 31;
break
case 4:
case 6:
case 9:
case 11:
day = 30;
break;
case 2:
day = this.isLeapYear(year) ? 29 : 28;
break;
default:
}
return day
},
chooseDate() {
if (this.readonly) {
return
}
this.initDateData();
},
/**
* 判断选择值的合法性
* @param {Array} pData 日期选择器选择后的回调数据
* @return {void}
*/
fnCheckSelectedValue(pData) {
if('[object Array]' !== Object.prototype.toString.call(pData)) {
return;
}
//判断特殊日期
//获取月份进行判断
let tData = pData;
switch (tData[1]) {
case '2':
//判断是否为闰年
let tNum = '28';
if(this.isLeapYear(tData[0])){
tNum = '29';
}
if( parseInt(tData[2]) > parseInt(tNum) ){
tData[2] = tNum;
this.fnSetSelectedValue(tData);
}
else {
this.data.oSelectedData = tData;
}
break;
case '4':
case '6':
case '9':
case '11':
if( tData[2] == '31') {
tData[2] = '30';
this.fnSetSelectedValue(tData);
}
else {
this.data.oSelectedData = tData;
}
break;
default:
this.data.oSelectedData = tData;
}
},
/**
* 主动设置选择器的选择值
* @param {Array} pData 日期选择器选择后的回调数据
* @return {void}
*/
fnSetSelectedValue(pData) {
if('[object Array]' !== Object.prototype.toString.call(pData)) {
return;
}
var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.setValue({
id: this.data.vPickerId,
data: pData
});
this.data.oSelectedData = pData;
},
showDate() {
let that = this;
var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.show({
id: that.data.vPickerId
});
},
hideDate() {
let that = this;
var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.hide({
id: that.data.vPickerId
});
},
setDate(){
let that = this;
var UICustomPicker = api.require('UICustomPicker');
UICustomPicker.setValue({
id: that.data.vPickerId,
data: that.data.actives
});
},
setValue(value) {
if (this.$model) {
this.$model.value = value;
}
},
clearDate() {
this.data.selectDate = "";
this.setValue("");
this.fire('selectDate', {
date: ""
});
}
}
}
</script>
<style scoped>
.field__body {
flex: 1;
}
.field__control {
background-color: red;
display: block;
box-sizing: border-box;
color: #323233;
border: none;
font-size: 14px;
height: 24px;
line-height: 24px;
width: 100%;
flex-shrink: 0;
background: transparent;
}
.field--disabled {
cursor: not-allowed;
opacity: 0.3;
}
.field__control-center {
text-align: center;
}
.field__control-right {
text-align: right;
}
.field__control--error {
color: #ee0a24;
}
.field__error-msg {
color: #ee0a24;
font-size: 12px;
}
.field__value {
font-size: 14px;
color: #323233;
line-height: 24px;
}
.field__placeholder {
font-size: 14px;
color: #bbb;
line-height: 24px;
}
</style>

复制代码

技术咨询-特特 · 回复于2022-12-23 14:21:49

现在你的问题解决没，如果还有问题，继续发个帖子，把旧帖子链接附上