留学择校2.0改版总结
前前后后写了一个半月，12月底加班了两个周末，周中也在加班，还是有点痛苦的
问题出在哪呢？
数据库页面复杂度估计不足，这个页面现在有两千行。
复杂的地方在于：
- 有三个tab: 院校库，专业库， 案例库
- 每个tab有筛选条件
- 两个tab有加载更多
- 每个tab有搜索条件
选校页面也比较复杂，复杂的点是滑动删除选校的交互
院校详情页，有视频的时候，样式不同
多催设计，别瞎等
uniapp开发的优点
- 代码提示更好
- 有computed
uniapp开发的缺点 - xml, js, css全在一个文件里，代码量比较大
- 报错不好定位
- 很多报错
- 弹窗组件的隐藏，需要在外界设置？？ 内部私有属性呢？
遇到并解决的问题&学到的技术，技巧：
- 数组限制展示的数量，可以在xml里面用index判断， 不必在js里面截取数组
- view作为容器，可以直接显示文字，不用一定夹一个
标签。有时候样式不对，还是要夹个 标签 - 循环生成的组件，如果绑定的key 是固定的，有可能会出bug
<view class="ibItem" :class="index == activeIdx ? 'ibActive' : '' " v-for="(item, index) of products"
@tap="sectonItemTap(item , index)" :key="ibKey">
上面的写法，无法定位了，去掉:key="ibKey" 就好了
- 选校不能删除
<block v-for="(item, index) in sData.list" v-if="isHome">
<school-moveableview :sData="item" @deleteSchool='moveableDelete' @editCallBack='moveableEdit' v-if="index < 5"
:selfId='index' :operatingId='operatingId' @opShowCallBack='opShowCallBack'></school-moveableview>
</block>
<block v-else>
<block v-for="(item, index) in sData.groupList">
<view class="groupBox" v-if="item.list.length > 0" :style="{'margin-top': index == 0 ? '0' : '20rpx'}">
<image class="gbTitleIcon" :src="item.icon"></image>
<block v-for="(seitem, seindex) in item.list">
<school-moveableview :sData="seitem" @deleteSchool='mDelete' @editCallBack='moveableEdit'
:multipleSelect='multipleSelect' :selfId='index-seindex' :operatingId='operatingId'
@opShowCallBack='opShowCallBack' @selectCallBack='selectCallBack'></school-moveableview>
</block>
</view>
</block>
</block>
第一个<school-moveableview 的 deleteSchool可以正常回调， 但是else里面这个deleteSchool不能回调， 最后发现第二个<school-moveableview在双层循环中， item没有修改
我之前这么写的，回调就调用不了：
<!-- 循环中的item 要修改，否则无法回调 -->
<block v-for="(item, seindex) in item.list">
<school-moveableview :sData="item" @deleteSchool='mDelete' @editCallBack='moveableEdit'
:multipleSelect='multipleSelect' :selfId='index-seindex' :operatingId='operatingId'
@opShowCallBack='opShowCallBack' @selectCallBack='selectCallBack'></school-moveableview>
</block>
- 取数据的语法
const {
clientX,
clientY
} = event.touches[0];
- 加选校的动效
dotAnimate(event) {
const {
clientX,
clientY
} = event.changedTouches[0]; // 设置小红点初始位置
this.dotLeft = clientX + 'px';
this.dotTop = clientY + 'px';
const num = 30;
const track = [];
for (let i = 0; i < num + 1; i++) {
const [x, y] = this.twoBezier(i / num, [clientX, clientY], [clientX - 60, clientY - 120], [this
.endLeft,
this.endTop
]);
track.push({
opacity: 1,
left: `${x}px`,
top: `${y}px`
});
}
track[num].opacity = 0;
let i = 0;
const inter = setInterval(() => {
if (i === num + 1) {
clearInterval(inter);
return;
}
const {
opacity,
left,
top
} = track[i];
this.dotOpacity = opacity;
this.dotLeft = left;
this.dotTop = top;
i++;
}, 10);
},
/**
* @desc 二阶贝塞尔
* @param {number} t 当前百分比
* @param {Array} p1 起点坐标
* @param {Array} cp 控制点
* @param {Array} p2 终点坐标
*/
twoBezier(t, p1, cp, p2) {
const [x1, y1] = p1;
const [cx, cy] = cp;
const [x2, y2] = p2;
const x = (1 - t) * (1 - t) * x1 + 2 * t * (1 - t) * cx + t * t * x2;
const y = (1 - t) * (1 - t) * y1 + 2 * t * (1 - t) * cy + t * t * y2;
return [x, y];
},
- computed 计算属性, 注意跟method平级
- 组件使用ref, 在外部直接调用组件内方法
this.$refs.csRef.hideAllOptions()
- 弹窗组件可以写个selfShow ，可以少写一个回调
- 滑动删除的不完美优化
handleTouchEnd: function(event) {
console.log('拖动结束!!', event)
if (this.multipleSelect) {
return
}
const {
clientX,
clientY
} = event.changedTouches[0];
const {
start_x,
start_y
} = this;
let vertical = Math.abs(clientY - start_y)
// if (Math.abs(clientY - start_y) > 95) return; // 处理上下滑动误触左右滑动的情况
if ((clientY - start_y) > 50) {
console.log(11111111111111)
this.hideOperations();
} else {
let yOffset = Math.abs(clientY - start_y)
let xOffset = Math.abs(clientX - start_x)
if(yOffset > xOffset) {
this.hideOperations();
return
}
const direction = clientX - start_x;
// 这里使用1来判断方向，保证用户在非滑动时不触发滚动（有时点击也会产生些许x轴坐标的变化）
if (direction < -1) {
this.showOperations();
} else if (direction > 1) {
this.hideOperations();
} else {
// this.toBrandDetail();
}
}
},
TODO:
1.数据库页面，swiper滚动，嵌套swiper 50个数据安卓卡顿
2.选校页面滑动我的选校，手指到区域外，不能展开（现在统一收起了）
3.留学总监封装
4. 报错修复
看看改过的bug, 代码
mark:
https://admin.guixue.com:9889/backend/workplace/task/1009/1540 )
