ImagePreview实现图片预览

需求：现在很多手机app都不用原生态开发，我们可以使用手机前端ui框架实现。例如：本案例使用的是vue+cube-ui，那我们要实现在手机上查看大图，即点击图片，图片放大，可以对图片进行缩放，如果有多张，可以滑动切换。下面直接上代码：<template><div class="container"><div

Roriring

3827人浏览 · 2019-03-11 09:13:23

Roriring · 2019-03-11 09:13:23 发布

需求：现在很多手机app都不用原生态开发，我们可以使用手机前端ui框架实现。例如：本案例使用的是vue+cube-ui，那我们要实现在手机上查看大图，即点击图片，图片放大，可以对图片进行缩放，如果有多张，可以滑动切换。下面直接上代码：

  <template>
    <div class="container">
      <div class="header">
        <div class="back" @click="goBack()"><img src="../assets/back-icon.png"></div>
        <div class="title">材料管理</div>
        <div class="operate" @click="toFilterPage">
          <span class="operateText">筛选</span>
        </div>
      </div>
      <div class="tab">
        <div class="tab-item" @click="changeData(0)">进场记录
          <div class="tab-line"></div>
        </div>
        <div class="tab-item" @click="changeData(1)">领用记录
          <div class="tab-line"></div>
        </div>
      </div>
      <div class="wrapper" ref="wrapper">
        <ul class="content">
          <li v-for="(item, index) in dataList">
            <div :class="item.checkResult == 'Y' ? 'item-list-y' : 'item-list-n' ">
              <div class="list-title">单号：{{item.mioNo}}{{item.mooNo}}
                <span v-if="item.checkResult == 'Y' && item.mioProduct" class="check-y">合格</span>
                <span v-if="item.checkResult == 'N' && item.mioProduct" class="check-n">不合格</span>
              </div>
              <div class="list-text" v-if="item.mioProduct">进场时间：{{item.createDate.split(" ")[0]}}<span style="float: right;">验收人：{{item.name}}</span></div>
              <div class="list-text" v-if="item.mooPlace">领用时间：{{item.createDate.split(" ")[0]}}<span style="float: right;">领用人：{{item.name}}</span></div>
              <div class="list-text" v-if="item.mioProduct">生产厂家：{{item.mioProduct}}</div>
              <div class="list-text" v-if="item.remarks" style="line-height: 18px!important;">备注说明：{{item.remarks}}</div>
              <div class="list-text" v-if="item.mooPlace">施工部位：{{item.mooPlace}}</div>
              <div class="stuff-list">
                <div class="stuff-div" v-for="(subItem, subIndex) in item.detailList">
                    <img :src="rootPath+subItem.miodPic | imgStringFilter" @click="showImagePreview(subItem.miodPic)">
                    <div class="stuff-info">
                      <div class="stuff-text">材料：<span>{{subItem.materialName}}</span></div>
                      <div class="stuff-text">数量：<span>{{subItem.materialNum}}</span></div>
                      <div class="stuff-text">型号：<span>{{subItem.materialType}}</span></div>
                    </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="add" @touchstart="intoAdd"><span>{{addText}}</span></div>
      </div>
      <div class="noInfo" v-show="isShow">暂无数据</div>
      <div class="loadingDiv" :style="{display:show}">
        <cube-loading :size="40"></cube-loading>
      </div>
    </div>
  </template>
  <script>
    import BScroll from 'better-scroll';
    import axios from 'axios';
    import ImagePreview from "cube-ui";
    import qs from 'qs';
    export default {
      data () {
        return {
          imgs: [{url: '../assets/bg.png'}, {url: '../assets/device1.png'}, {url: '../assets/bg.png'}],
          imgs1: ['/SmartSitesApp/assets/bg.png', './SmartSitesApp/assets/device1.png', '/SmartSitesApp/assets/bg.png'],
          addTextList:["+ 进场验收","+ 领用单"],
          tabFlag: 0,
          qryParam: {},
          loadFlag: false,
          pageNum: 1,
          pageSize: 15,
          dataList: [],
          addText:"",
          show: 'none',
          isShow: false,
          pageEnd: false,
          tabPage: 0,
  
          mioNo: '',
          startDate: '',
          endDate: '',
          mioProduct: '',
          createId: '',
  
          mioNo1: '',
          startDate1: '',
          endDate1: '',
          createId1: '',
  
          rootPath: '',
        }
      },
      //过滤器
      filters:{
        //截取分号前面的字符串
        imgStringFilter:function(value){
          return value.split(';')[0];
        }
      },
      methods: {
        showImagePreview(picStr){
            var imgs = [];
            imgs = picStr.split(';');
            var path = this.rootPath;
            for(var i=0; i<imgs.length; i++){
                imgs[i] = path + imgs[i];
            }
            this.preview = this.$createImagePreview({
              imgs: imgs
            });
          this.preview.show();
        },
        goBack(){
          this.$router.back(-1);
        },
        showMessage(txt, type){
          const toast = this.$createToast({
            txt: txt,
            type: type,
            time: 2000,
          });
          toast.show();
        },
        showErrMessage(txt){
          const toast = this.$createToast({
            txt: txt,
            time: 2000,
            type: 'error'
          });
          toast.show();
        },
        changeData(val){
          this.isShow = false;
          this.pageNum = 1;
          this.pageEnd = false;
          /*if (this.tabFlag == val) {
            return false;
          }*/
          this.tabFlag = val;
          $(".tab-item").removeClass("tab-sel");
          $(".tab-item:eq(" + val + ")").addClass("tab-sel");
          if (val == 0) {
            this.tabPage = 0;
            this.getIntoRecordData();
          }
          else {
            this.tabPage = 1;
            this.getNeckRecordData();
          }
          this.addText = this.addTextList[val];
        },
        getNeckRecordData(){
          let that = this;
          that.show = "flex";
          let deptId = this.$store.state.deptId;
          let projectId = this.$store.state.projectId;
          let param = {"deptId":deptId, "projectId":projectId, "startDate": that.startDate1, "endDate": that.endDate1, mioNo: that.mioNo1, createrId: that.createId1};
          let qryParam ={"pageNum": that.pageNum, "pageSize": that.pageSize, "param": JSON.stringify(param)};
          axios.post('/SmartSitesApp/stuff/neckRecord.do',qs.stringify(qryParam),{withCredentials:true })
            .then(response => {
              that.show = "none";
              let status = response.status;
              if (status == 200) {
                let data = response.data;
                if (data.code == 200) {
                  var data = data.data;
                  if(data.path){
                    that.rootPath = data.path;
                  }
                  let dataLists = data.rows;
                  var totalCount = dataLists.length;
  
                  if (that.pageNum == 1) {
                    if (totalCount > 0) {
                      that.dataList = dataLists;
                      that.pageNum++;
                      if (totalCount < that.pageSize) {
                        that.pageEnd = true;
                      }
                    }
                    else {
                      that.dataList = [];
                      that.isShow = true;
                      $(".container").css("background-color", "#F7F7F7");
                      that.pageEnd = true;
                    }
                  }
                  else {
                    if (totalCount > 0) {
                      that.dataList = that.dataList.concat(dataLists);
                      that.pageNum++;
                      if (totalCount < that.pageSize) {
                        that.pageEnd = true;
                      }
                    }
                    else {
                      that.pageEnd = true;
                    }
                  }
                  that.$nextTick(() => {
                    that.pullingDownUp();
                  });
                }else {
                  that.showErrMessage(data.msg);
                }
              }else{
                that.showErrMessage("服务错误");
              }
            })
            .catch(err => {
              that.show = "none";
            });
        },
        getIntoRecordData(){
          let that = this;
          that.show = "flex";
          let deptId = this.$store.state.deptId;
          let projectId = this.$store.state.projectId;
          let param = {"deptId":deptId, "projectId":projectId, "startDate": that.startDate,"endDate": that.endDate, mioNo: that.mioNo, createrId: that.createId, mioProduct: that.mioProduct};
          let qryParam ={"pageNum": that.pageNum, "pageSize": that.pageSize, "param": JSON.stringify(param)};
          axios.post('/SmartSitesApp/stuff/intoRecord.do',qs.stringify(qryParam),{withCredentials:true })
            .then(response => {
              that.show = "none";
              let status = response.status;
              if (status == 200) {
                let data = response.data;
                if (data.code == 200) {
                  var data = data.data;
                  if(data.path){
                    that.rootPath = data.path;
                  }
                  let dataLists = data.rows;
                  var totalCount = dataLists.length;
  
                  if (that.pageNum == 1) {
                    if (totalCount > 0) {
                      that.dataList = dataLists;
                      that.pageNum++;
                      if (totalCount < that.pageSize) {
                        that.pageEnd = true;
                      }
                    }
                    else {
                      that.dataList = [];
                      that.isShow = true;
                      $(".container").css("background-color", "#F7F7F7");
                      that.pageEnd = true;
                    }
                  }
                  else {
                    if (totalCount > 0) {
                      that.dataList = that.dataList.concat(dataLists);
                      that.pageNum++;
                      if (totalCount < that.pageSize) {
                        that.pageEnd = true;
                      }
                    }
                    else {
                      that.pageEnd = true;
                    }
                  }
                  that.$nextTick(() => {
                    that.pullingDownUp();
                  });
                }else {
                  that.showErrMessage(data.msg);
                }
              }else{
                that.showErrMessage("服务错误");
              }
            })
            .catch(err => {
              that.show = "none";
            });
        },
        loadData(){
          if(this.tabFlag == 0){
            if (!this.pageEnd) {
              this.getIntoRecordData();
            }
            else {
              this.showErrMessage("已加载全部数据");
            }
          }else if(this.tabFlag == 1){
            if (!this.pageEnd) {
              this.getNeckRecordData();
            }
            else {
              this.showErrMessage("已加载全部数据");
            }
          }
        },
        pullingDownUp(){
          this.scroll.finishPullDown();
          this.scroll.finishPullUp();
          this.scroll.refresh() //重新计算元素高度
        },
        intoAdd(){
            if(this.addText == this.addTextList[0]){
              this.$router.push("addInspectOrder");
            }else{
              this.$router.push("addUseOrder");
            }
        },
        toFilterPage(){
          this.$router.push({name:"filterPage",params:{"tabPage": this.tabPage}});
        }
      },
      destroyed: function () {
        localStorage.setItem("filterMaterial", null);
      },
      mounted(){
        this.tabPage = 0;
        let that = this;
        var screenWidth = $(window).width();
        $(".add").css("margin-left",(screenWidth-120)/2);
        this.addText = this.addTextList[0];//进场验收添加按钮
        //选项卡切换到进场记录
        $(".tab-item").removeClass("tab-sel");
        $(".tab-item:eq(0)").addClass("tab-sel");
        this.$nextTick(function () {
          that.scroll = new BScroll(that.$refs.wrapper, {bounce: true, momentum: true, click: true});
          that.scroll.on('scrollEnd', () => {
            if (that.scroll.y <= (that.scroll.maxScrollY)) {
              that.loadData();
            }
          })
        });
  
        try{
          var filterMaterial = JSON.parse(localStorage.getItem("filterMaterial"));
  
          that.tabPage = filterMaterial.tabPage!=undefined&&filterMaterial.tabPage!=null ? filterMaterial.tabPage : 0;
          if(that.tabPage == 0){
            that.mioNo = filterMaterial.orderNo;
            that.startDate = filterMaterial.startTime;
            that.endDate = filterMaterial.endTime;
            that.mioProduct = filterMaterial.productName;
            that.createId = filterMaterial.staffId;
          }else if(that.tabPage == 1){
            that.mioNo1 = filterMaterial.orderNo;
            that.startDate1 = filterMaterial.startTime;
            that.endDate1 = filterMaterial.endTime;
            that.createId1 = filterMaterial.staffId;
          }
  
        }catch(e){
  
        }
        if(that.tabPage == 0){
          that.changeData(0);
        }else if(that.tabPage == 1){
          that.changeData(1)
        }
      }
    }
  </script>
  <style scoped>
    .noInfo {
      margin-top: 10px;
      position: absolute !important;
      font-size: 16px;
      color: #808080;
      width: 100%;
      top: 100px;
      height: calc(100% - 130px);
      background: #fff;
      padding-top: 20px;
    }
    .loadingDiv{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrapper {
      width: 100%;
      height: calc(100% - 118px);
      overflow: auto;
      margin-top: 10px;
    }
    .item-list-y {
      background-color: #fff;
      margin: 10px 10px 0 10px;
      padding: 10px 10px;
      border-top: 3px solid #5595cf;
      box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2), 5px 0 5px rgba(0, 0, 0, 0.2), 0 5px 5px rgba(0, 0, 0, 0.2);
      text-align: left;
    }
    .item-list-n {
      background-color: #fff;
      margin: 10px 10px 0 10px;
      padding: 10px 10px;
      border-top: 3px solid #c7625c;
      box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2), 5px 0 5px rgba(0, 0, 0, 0.2), 0 5px 5px rgba(0, 0, 0, 0.2);
      text-align: left;
    }
    .check-y{
       color: #5595cf;
      float: right;
      font-size: 13px;
    }
    .check-n{
      color: #c7625c;
      float: right;
      font-size: 13px;
    }
    .list-text
    {
      color:#9e9e9e;
      padding-top:3px;
      font-size: 13px;
      line-height: 26px;
    }
    .stuff-list
    {
      background-color:#f9f9f9;
      margin:10px 0 0px 0;
    }
    .stuff-div
    {
      height:64px;
      position:relative;
      border-top:1px dashed #e9e9e9;
    }
    .stuff-div img
    {
       position: absolute;
       left:10px;
       width:47px;
       height:47px;
       top:10px;
    }
    .stuff-info
    {
      position: absolute;
      left:80px;
      top:0px;
      padding-top:4px;
    }
    .stuff-text
    {
       color:#9e9e9e;
       line-height:20px;
      font-size: 13px;
    }
    .stuff-text span
    {
        text-align:left;
        float:none;
    }
    .add{
      position: absolute;
      bottom: 10px;
      z-index: 9999;
      background-color: #169BD5;
      color: white;
      width: 120px;
      font-size: 14px;
      padding: 10px 0px;
      border-radius: 20px;
    }
    .tab{
      border-bottom: 1px solid #e8e8e8;
      height: 38px!important;
    }
    .tab-item{
      font-size: 13px;
      height: 33px;
      line-height: 32px;
    }
    .list-title{
      font-size: 13px;
      line-height: 26px;
    }
    .tab-sel .tab-line{
      height: 2px;
    }
  </style>

这是我工作中开发的页面，是一个完整的案例，上面有js、css，这里面还缺少路由的配置，之所以我这里没有提供的原因是我相信进来看案例的读者一定是有相关开发经验的。

这是重点：本案例主要是实现大图查看，所以读者只需要在其中抽取图片相关的代码，例如<img :src=“rootPath+subItem.miodPic | imgStringFilter” @click=“showImagePreview(subItem.miodPic)”>，函数的实现在下面也可以找到，在使用ImagePreview的时候一定要导入依赖import ImagePreview from “cube-ui”;当然这些都是细节。希望可以帮到大家！

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^