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

  

微信小程序点击图片全屏的更多相关文章

  1. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  2. 微信小程序-点击图片预览

    拿接口  有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数

  3. 微信小程序点击图片预览-wx.previewImage

    <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...

  4. 微信小程序点击图片放大

    WXML: <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image cla ...

  5. Slog71_选取、上传和显示本地图片GET !(微信小程序之云开发-全栈时代3)

    ArthurSlog SLog-71 Year·1 Guangzhou·China Sep 12th 2018 ArthurSlog Page GitHub NPM Package Page 掘金主页 ...

  6. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  7. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  8. 记一次微信小程序在安卓的白屏问题

    在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下 1. ...

  9. 微信小程序开发之图片预览

    实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...

随机推荐

  1. MATLAB 画柱状图(/直方图)修改横坐标名称并使其横着显示

    使用MATLAB 画柱状图 ,即bar (x,y),其横坐标是默认 1.2.3.4.……的 % --v1 y1=[asum1,asum2,asum3,asum4,asum5,asum6,asum7,a ...

  2. java写桌面程序

    一:使用java swing开发窗口程序 简述: 1.文章内容主要是使用java swing类库开发一个小的窗口程序,然后使用exe4j发布成exe可以安装的程序,让初学者对使用java来做pc软件开 ...

  3. MySQL 服务常用操作命令

    1.MySQL 服务设置 在使用 mysql.server 命令之前需要将路径 /usr/local/mysql/support-files 添加到系统环境变量中. export PATH=$PATH ...

  4. 小米Pro 安装苹果系统

    参考 http://www.miui.com/thread-11363672-1-1.html http://www.miui.com/thread-7601066-1-1.html https:// ...

  5. 2D空间的OBB碰撞实现

    OBB全称Oriented bounding box,方向包围盒算法.其表现效果和Unity的BoxCollider并无二致.由于3D空间的OBB需要多考虑一些情况 这里仅关注2D空间下的OBB. 实 ...

  6. docker被屏蔽后下载方法

    docker镜像默认的官网上传平台:https://hub.docker.com/,k8s运行时需要从google下载镜像(k8s.gcr.io),但该网被屏蔽了,怎样下载到所需镜像呢? 1. 可在知 ...

  7. java maven 编译文件时 有些类型文件 不存在

    在pom.xml中添加如下: <build> <resources> <resource> <directory>src/main/resource&l ...

  8. Android开发怎么让自己的APP UI漂亮、大方(规范篇一)

    首先,笔者是站立在开发者的角度来看UI设计的,欢迎专业人士提供指导,不多说,来看怎么把UI设计和开发高效结合起来~ 一.约定APP开发中的一些规则 1.大部分图标满足HDPI(高清)即可,比如:大众点 ...

  9. Google API Design Guide (谷歌API设计指南)中文版

    面向资源的设计 这份设计指南的目标是帮助开发人员设计简单.一致.易用的网络API.同时,它也有助于收敛基于socket的API和(注:原文是with,这里翻译为“和”)基于HTTP的REST API. ...

  10. Java基础-多线程学习目录

    1.Java多线程并发编程一览笔录 2.什么时候使用CountDownLatch 3.Java并发学习系列-绪论