微信小程序点击图片全屏
时间：2019-01-10 10:43:36
收藏：0
阅读：646
作为一个只懂简单HTML，jQuery，JS的web后台开发者，最近在学习小程序开发，现在将小程序的点击全屏功能的相关内容记录下来。如果有不对的地方或者有更简单的方法，请留言指教 0_0~
.js 文件
data: {
one:"block", //判断图片全屏前是否隐藏
ones:"none", //判断图片全屏后是否隐藏
phoneheight :" " , //按比例缩放后图片高
phoneWidth : " " //按比例缩放后图片宽
}
.wxml 文件
//全屏前
<view class=‘first‘ style=‘display:{{one}}‘>
<image class=‘detailphone‘ src=‘{{urls}}‘ mode=‘widthFix‘ bindtap=‘phonefull‘></image>
</view>
//全屏后
<view class=‘firsts‘ style=‘display:{{ones}}‘>
<image style=‘width:{{phoneWidth}}rpx;height:{{phoneheight}}rpx;top:{{top}}rpx;left:{{left}}rpx‘ src=‘{{urls}}‘ class="asd" mode="aspectFit" bindtap=‘nophonefull‘ id="{{urls}}" ></image>
</view>
当点击全屏前图片时，触发bindtap事件
.js 文件
//点击照片全屏
phonefull : function(){
var originalWidth =0; //图片原本的高
var originalHeight=0; //图片原本的宽
var height = 0; //可用屏幕高
var width = 0; //可用屏幕宽
var orwidth = 0;
var orheight =0;
//在javascript语言中，this代表着当前的对象，它在程序中随着执行的上下文随时会变化。在进入phonefull点击事件函数后，对象已经发生了变化。所以已经不是原来的页面对象了。自然就没有了data属性，通过 var that = this 把this对象复制到临时变量that.这样就将原来的页面对象赋值给that了。
var that = this ;
wx.getImageInfo({ //.getImageInfo()获取图片信息
src: this.data.urls, //要获取的图片信息的路径
success: function (res) { //获取图片成功后的操作
originalWidth = res.width;
originalHeight = res.height;
wx.getSystemInfo({ //获取设备的相关信息
success: function (res) {
height = res.windowHeight*2; //res.windowHeight 可用屏幕高 小程序使用自适应单位 rpx，获取屏幕高以 px 为单位，以iPhone6为例，1rpx=0.5px
width = res.windowWidth*2; //res.windowWidth 可用屏幕宽
orwidth = width / originalWidth ; // 可用屏幕宽与图片原本宽的比
orheight = height / originalHeight ; //可用屏幕高与图片原本高的比
//因为全屏需要将高宽全部显示出来，所以进行比例判断
if (orwidth <= orheight) {
that.setData({
phoneheight: originalHeight * orwidth,
phoneWidth: originalWidth * orwidth,
top: (height - originalHeight * orwidth)/2,
left: (width - originalWidth * orwidth)/2,
one: "none",
ones: "block"
})
} else {
that.setData({
phoneheight: originalHeight * orheight,
phoneWidth: originalWidth * orheight,
top: (height - originalHeight * orheight) / 2,
left: (width - originalWidth * orheight) / 2,
one: "none",
ones: "block"
})
}
},
fail: function (res) {
console.log("获取设备高宽失败");
},
})
},
fail: function (res) {
console.log("获取图片高宽失败");
},
})
},
这时，通过one，ones的赋值，显示的就是全屏的图片啦，如果想退出全屏，点击全屏后的图片，触发nophonefull事件就可以啦
.js 文件
//退出满屏
nophonefull: function () {
this.setData({
one: "block",
ones: "none"
})
}
评论（0）