从其它页面返回时 image 图片消失

小程序 文章 2021-04-07 17:22 27 0 全屏看文

从其它页面返回时 image 图片消失The image disappears when returning from another page

从其它页面返回时 image 图片消失
框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信安卓客户端 8.0.2 2.16.0
  1. 在第一个页面显示一张图
  2. 跳转到另一个有很多图的页面,其中一张和第一个页面那张图地址相同
  3. 快速点击返回
  4. 第一个页面的图片消失

和返回的时机有一定关系,大致上是第二个页面的图开始加载,但还没有全加载出来的时候点返回,多试几次总能复现。在开发工具和安卓客户端都能重现,第二个页面图越多越容易重现。

开发工具重现视频:

安卓客户端重现视频:

第一个页面 /pages/index/index 代码:

<navigator url="/image/index">  <image src="{{url}}"></image>  <view>上面是图</view></navigator>


Page({  data: {    url'',    list: [],  },  onLoad() {    setTimeout(() => {      this.setData({        url'https://mszm.dtzhuanjia.com/image/team/mijuejubensha/logo.jpg',      });    }, 1000);  },})


第二个页面 /pages/image/index 代码:

<image src="{{url}}"></image><image wx:for="{{list}}" src="/uploads/cj/article/2021/04/07/f2b9489db529658d9122e50985cd3c3c.jpg"></image>


Page({  data: {    url'',    list: [],  },  onLoad: function () {    setTimeout(() => {      this.setData({        url'https://mszm.dtzhuanjia.com/image/team/mijuejubensha/logo.jpg',        list: [          "https://mszm.dtzhuanjia.com/image/larp/xjjf/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/sgbwg/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/dlgf/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/yxmt/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/wd/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/yxbx_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/lxtdrj/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/ajl_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/am_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/wyg/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/sw_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/xwd/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/ws_4/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/bjqa/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/ecs/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/gmyyztjsg/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/da_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larph/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/sy_5/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/sz_6/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/ly_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/kdyxhycs/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/sdlwdnl/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/jsby/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/qzzw/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/yxzd/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/zjyhc/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/zgrm/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/gysl/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/hsw_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/wwzy/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/wywwzz/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/flydzm/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/qchhr/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/qzmsl/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/jxw/image001.jpg?v1",          "https://mszm.dtzhuanjia.com/image/larp/lbhxdy/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/sw_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/wj/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/xwd/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/wzkr/image001.jpg?v1",          "https://mszm.dtzhuanjia.com/image/larp/jxhx/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/wsd/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/dl/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/wwzy/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/dmgy/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/flydzm/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/hsdt/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/djx_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/gysl/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/shyj/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/yc/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/gmy/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/ca/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/sl/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/yflt/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/fy/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/yhgsj/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/lrg/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/dy/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/as/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/jw/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/72xs/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/flsl2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/lfwjlb/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/sg21k/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/fqlx/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/zzmd/image001.jpg?v1",          "https://mszm.dtzhuanjia.com/image/larpm/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/swmj/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/zhdsc/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/dtywl/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/dq/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/bblh/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/cwz/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/yzsw/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/dqy/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/xlxw/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/hddxfx/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/zsg/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/bx_2/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/qhby/image001.jpg?v1",          "https://mszm.dtzhuanjia.com/image/larp/013jlms/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/qsxz/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/ace/image001.jpg?v1",          "https://mszm.dtzhuanjia.com/image/larp/gjqt/image001.jpg?v1",          "https://mszm.dtzhuanjia.com/image/larp/bgzc/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/mxszx/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/dyhys/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/bmf/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/xrqs/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/hllg/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/ft1928/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/dxmgd/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/csbwz/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/csdzy/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/zq/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/%E6%9C%AA%E6%8E%88%E6%9D%83/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/kdyxhycs/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/sdlwdnl/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/jsby/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/qzzw/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/yxzd/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/shyj/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/zjyhc/image001.jpg",          "https://mszm.dtzhuanjia.com/image/larp/insidezzqgms/image001.jpg"        ],      });    }, 100);  },})

Framework type problem type terminal type wechat version basic library version applet bug wechat Android client 8.0.2 2.16.0 displays a picture on the first page, jumps to another page with many pictures, one of which has the same address as the picture on the first page, and quickly clicks to return the picture on the first page to disappear It has something to do with the time of return. Generally, the second page of the graph starts to load, but before it is fully loaded, you can return at a certain time. If you try several times, you can always reproduce it. It can be reproduced in both development tools and Android clients. The more the second page graph, the easier it is to reproduce. Development tool reproduction video: Android client reproduction video: the first page / pages / index / index code: < navigator url = / image / index "> < image SRC = {URL}} > < / Image > < View > above is the figure < / View > < / navigator > page ({data: {URL: ', list: [],},   onLoad() {    setTimeout(() => {       this.setData ({        url: ' https://mszm.dtzhuanjia.com/image/team/mijuejubensha/logo.jpg ',      });    }, 1000);  }, }) second page / pages / image / index code: < image SRC = {URL} "> < / Image > < image Wx: for = {list}" SRC = {item} "> < / Image > page ({data: {URL: ', list: [],}),   onLoad: function () {    setTimeout(() => {       this.setData ({        url: ' https://mszm.dtzhuanjia.com/image/team/mijuejubensha/logo.jpg ',        list: [          " https://mszm.dtzhuanjia.com/image/larp/xjjf/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/sgbwg/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/dlgf/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/yxmt/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/wd/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/yxbx_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/lxtdrj/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/ajl_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/am_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/wyg/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/sw_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/xwd/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/ws_ 4/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/bjqa/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/ecs/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/gmyyztjsg/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/da_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larph/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/sy_ 5/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/sz_ 6/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/ly_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/kdyxhycs/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/sdlwdnl/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/jsby/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/qzzw/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/yxzd/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/zjyhc/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/zgrm/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/gysl/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/hsw_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/wwzy/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/wywwzz/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/flydzm/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/qchhr/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/qzmsl/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/jxw/image001.jpg?v1 ",          " https://mszm.dtzhuanjia.com/image/larp/lbhxdy/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/sw_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/wj/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/xwd/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/wzkr/image001.jpg?v1 ",          " https://mszm.dtzhuanjia.com/image/larp/jxhx/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/wsd/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/dl/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/wwzy/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/dmgy/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/flydzm/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/hsdt/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/djx_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/gysl/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/shyj/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/yc/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/gmy/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/ca/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/sl/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/yflt/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/fy/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/yhgsj/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/lrg/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/dy/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/as/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/jw/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/72xs/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/flsl2/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/lfwjlb/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/sg21k/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/fqlx/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/zzmd/image001.jpg?v1 ",          " https://mszm.dtzhuanjia.com/image/larpm/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/swmj/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/zhdsc/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/dtywl/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/dq/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/bblh/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/cwz/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/yzsw/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/dqy/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/xlxw/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/hddxfx/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/zsg/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/bx_ 2/image001.jpg",          " https://mszm.dtzhuanjia.com/image/larp/qhby/image001.jpg?v1 ",          " https://mszm.dtzhuanjia.com/image/larp/013jlms/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/qsxz/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/ace/image001.jpg?v1 ",           " https://mszm.dtzhuanjia.com/image/larp/gjqt/image001.jpg?v1 ",          " https://mszm.dtzhuanjia.com/image/larp/bgzc/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/mxszx/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/dyhys/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/bmf/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/xrqs/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/hllg/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/ft1928/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/dxmgd/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/csbwz/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/csdzy/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/zq/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/%E6%9C%AA%E6%8E%88%E6%9D%83/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/kdyxhycs/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/sdlwdnl/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/jsby/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/qzzw/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/yxzd/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/shyj/image001.jpg ",          " https://mszm.dtzhuanjia.com/image/larp/zjyhc/image001.jpg ",           " https://mszm.dtzhuanjia.com/image/larp/insidezzqgms/image001.jpg "],});}, 100);},}) code fragment https://developers.weixin.qq.com/s/3FZ6wnmX7Cpb

回答:

ᝰꫛꫀꪝ .:

第一个页面

onHide 添加定时器关闭



秋:就一个 setTimeout 你关闭啥?而且这个是用来模拟网络请求的
陈宇明:
打个log检查下定时器的执行情况
秋:都执行了
没有然后:

如果不设置延迟呢

没有然后:测试不设置延迟是没问题的
没有然后:第二页加上key就没问题
秋:图片是接口请求来的,不可能没有延迟
没有然后:你给第二页的循环加上key
秋:我原来的代码里本来就是有 key 的,不影响重现所以我在这里去掉了
没有然后:第二页图片太多了加载慢,加一个lazy-load=“{{true}}”;
秋:本来就有,不影响重现,所以这里去掉了

-EOF-