老师帮看看这样优化了页面的两个问题可行吗?

老师帮看看这样优化了页面的两个问题可行吗?

细节优化 (keep-alive缓存机制导致)

1)input输入城市确定后,再回到列表页还是显示在当时input输入城市时的的情况

city/Search.vue

//handleCityClick方法里添加清空input关键字内容
this.keyword=''

2)在城市列表页通过下拉滚动条选择城市后,再回到列表页还是显示在当时滚动条下拉的位置

city/List.vue

//重新激活页面时scroll默认滚动距离0
​activated(){
  this.scroll.scrollTo(0,0)


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2021-06-04 10:48:33

同学你好,优化的这三点很棒,给你一个大大的赞!!!

非常感谢同学的分享,这可能也会帮助到其他的小伙伴哦,祝学习愉快~

  • 提问者 gsl003 #1

    Bscroll 相当于在mounted 和 activated 里分别实例化了一次,这样好吗,还可以优化吗

    2021-06-04 10:55:36
  • 好帮手慕慕子 回复 提问者 gsl003 #2

    同学你好,对于你的问题解答如下:

    1、这样是可以的,因为使用了keep-alive做缓存,每次进入list页面时都是触发activated, 但是只有在第一次进入list页面时会触发mounted函数,之后再进入就不会mounted,所以也不会有什么影响的。

    2、暂时没有其他优化。

    祝学习愉快~

    2021-06-04 12:03:24
提问者 gsl003 2021-06-04 00:41:07

还有个优化问题

3)在城市列表页无滚动情况(第一屏范围内)选择城市后,再回城市列表页无法下拉.

city/List.vue

//activated方法下添加
this.scroll = new Bscroll(this.$refs.wrapper,{})


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师