ImagePreview实现图片预览

• 需求：现在很多手机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”;当然这些都是细节。希望可以帮到大家！