微信小程序点击图片全屏

Posted 2021-02-02 有点小情绪呀~

　　作为一个只懂简单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"

　　　　})

　　}