微信小程序点击图片全屏

　　作为一个只懂简单HTML，jQuery，JS的web后台开发者，最近在学习小程序开发，现在将小程序的点击全屏功能的相关内容记录下来。如果有不对的地方或者有更简单的方法，请留言指教 0_0~

　　.js 文件　

　　data: {　　　　

　　one:"block", //判断图片全屏前是否隐藏

　　ones:"none", //判断图片全屏后是否隐藏

　　phoneheight :" " , //按比例缩放后图片高

　　phoneWidth : " " //按比例缩放后图片宽

　　}

　　.wxml 文件

　　//全屏前

　　</view>

　　//全屏后

　　</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"

　　　　})

　　}

巴特西

微信小程序点击图片全屏

最新文章

热门文章