微信小程序页面内容自适应(苹果、安卓)图片的自适应
微信小程序页面内容自适应(苹果、安卓) 图片的自适应
·
一、1、将px 转为 rpx
2、app.js
App({
onLaunch() {
wx.cloud.init({
env: '',
traceUser: true
})
if (!wx.cloud) {
console.error('请使用2.2.3 或以上的基础库以使用云能力');
} else {
wx.cloud.init({
traceUser: true
})
}
let _self = this;
//判断是安卓还是苹果
wx.getSystemInfo({
success: res => {
const screen = res.screenHeight
const bottom = res.safeArea.bottom
if (screen != bottom) {
wx.setStorageSync('modelmes', true)
}
}
})
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
var code = res.code
wx.setStorage({
// 名称
key:'code',
// 值
data: code
})
},
fail: function () {
}
})
},
globalData: {
userInfo: null,
height: 0,
API_URL: '',
// 用户是否已经登录
},
})
主要的代码是:
wx.getSystemInfo({
success: res => {
const screen = res.screenHeight
const bottom = res.safeArea.bottom
if (screen != bottom) {
wx.setStorageSync('modelmes', true)
}
}
})
3、在页面中应用
let modelmes = wx.getStorageSync('modelmes');
this.setData({
isIphone: modelmes
})
<view class="footer" style="margin-bottom: {{isIphone ? '68rpx' : '0rpx'}};">
二、图片的自适应
<image src="{{detailsAll.describe}}" style="width:100%" mode="widthFix"></image>
重点:mode=“widthFix”
更多推荐
已为社区贡献2条内容
所有评论(0)