微信小程序点击图片全屏

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

 

  

微信小程序点击图片全屏

上一篇:微信小程序学习过程


下一篇:微信 自定义头部