大家在微信小程序的开发过程中,肯定会经常遇到一些图片以及页面刷新的问题,所以今天我们给大家整理了下面几个关于小程序图片自适应、本地图片的使用、redirect到tab的不刷新问题。
1、关于图片自适应
image标签中添加mode属性:
默认值: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中写样式
例如:
3、在页面中直接使用image标签,然后使用绝对定位
3、如何解决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();
}
爱盈利(aiyingli.com)移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者,移动盈利指导。我们的目标是让盈利目标清晰可见!降低门槛,让缺乏经验、资金有限的个人和团队获得经验和机会,提高热情,激发产品。
【转载说明】  若上述素材出现侵权,请及时联系我们删除及进行处理:8088013@qq.com