欢迎光临,了解微信小程序开发,就上易用通!

微信小程序 --- 图片自适应、本地图片的使用、redirect到tab的不刷新问题 ...

发布:2018-02-02 10:22浏览: 来源:网络 作者:cola

1、关于图片自适应

image标签中添加mode属性:

微信小程序 --- 图片自适应、本地图片的使用、redirect到tab的不刷新问题 ...(图1)

默认值:scaleToFill  ----  不保持纵横比例缩放图片,使图片的宽高完全拉伸至填满image标签

aspectFit  ----  保持纵横比例缩放图片,使图片的长边能够完全显示出来,也就说图片可以完整的显示出来

aspectFill  ----- 保持纵横比例缩放图片,只保证图片的短边能够完全显示出来,也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取

top  ----  不缩放图片,只显示图片的顶部区域

bottom  ----  不缩放图片,只显示图片的底部区域

center  ----  不缩放图片,只显示图片的中间区域

left  ----  不缩放图片,只显示图片的左边区域

right  -----   不缩放图片,只显示图片的右边区域

top left   ----  不缩放图片,只显示图片的左上边区域

top right  ----  不缩放图片,只显示图片的右上边区域

bottom left   ----  不缩放图片,只显示图片的左下边区域

bottom right  ----  不缩放图片,只显示图片的右下边区域

 

2、关于图片引用

在wxss页面中不能引用本地的图片

解决方案:

1、要是希望在wxss文件中使用背景图,我们可以使用网络图片,或者base64位的图片

2、通常情况下在CSS文件中我们是没有办法拿到后台返回的域名,然后我们又希望可以使用一些本地的小图标之类的,我们可以在wxml中使用背景图,直接在view的style中写样式

  例如:微信小程序 --- 图片自适应、本地图片的使用、redirect到tab的不刷新问题 ...(图2)

3、在页面中直接使用image标签,然后使用绝对定位

 

2、如何解决redirect到tab的不刷新问题

 

小程序需要判断用户是否登录,来显示不同的内容。当登录失效后需要重新登录并刷新页面,一般我们用 redirect 或者 switchTab 方法进行页面间的跳转,通过getCurrentPages() 拿到页面栈(数组,最多五个),最后一个就是当前页面的路径。

自然而然想到这样来刷新当前页:

const reload= () => {
  let curPage = getCurrentPages().pop().__route__;
  wx.redirectTo({
      url: '/' + curPage
   })  

}

这段代码在小程序内页工作的很好,但一到tab页就GG思密达了——并!不!会!刷!新!

下面的方法可以解决:

const reload= () => {
  let curPage = getCurrentPages().pop();  
  if (page == undefined || page == null) return;  
  page.onShow();

}





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。