vue，uniapp 手机端图片放大左右滑动浏览关闭

简单的理解下思路，代码如果有问题，请指出错误点

移动端H5页面图片放大切换浏览

步骤1：布局静态页面，跟弹出来的放大图片图片背景样式布局

步骤2：弹出的默认是隐藏false，点击图片把弹出层显示出来改为true

步骤3： 点击某一张图，弹出层的第一张就是当前的这张图

步骤4：根据滑动距离判断是左还是右滑动，滑到最后一张图，无限滑动（左右都是此思路）

步骤1

布局静态的图片滚动（css在后面）

定义图片数组

（这里是div，适合vue，uniapp 把div换成view，text等标签就行）

<!-- 图片滚动 -->

<div class="banner-box">
        <div class="img-url" v-for="(i,index) in baneerList" :key="index"   @click="handesImage(index)">
                   <img :src="i" alt="">
        </div>
</div>

<!-- 图片浏览 -->    
 <div v-if="Urlisshow" class="image-box">
         <img :src="baneerList[index]" @click="colseImg" @touchstart="touchstartImg"  @touchend="touchImg" />
          <div class="countLenth">

                <!-- 图片浏览 下的图片3个点-->    
                  <span :class="{'ciuntactive':contnnub==index}" v-for="(ite,index) in baneerList">        

                   </span>
           </div>
</div>

data里定义的数组 

Urlisshow: false,//默认隐藏图片浏览弹出层

index:0,//图片点开为当前索引

contnnub:0,//图片下面3个亮点为当前索引

startpageX:0,//滑动开始的位置

touchpageX:0,//滑动结束的位置

changetall:0,//根据此值正负判断是左还是右

baneerList: ['./static/img/banner1.png', './static/img/banner2.png', './static/img/banner3.png'], 

JS部分 

touchstart   滑动开始执行事件

touchend    滑动结束执行事件

//放大当前图片

handesImage(index) {
          this.index = index//图片点开为当前索引
          this.contnnub = index//图片下面3个亮点为当前索引
          this.Urlisshow = true//显示图片浏览弹出层
},

//获取滑动时开始的位置

touchstartImg(e){
     this.startpageX = event.targetTouches[0].pageX
},

//滑动结束时图片滑动

touchImg(e) {
        this.touchpageX = e.changedTouches[0].pageX //获取滑动时结束的位置

                   

                    //this.changetall  =  滑动时结束的位置 - 滑动时开始的位置
                    this.changetall = this.touchpageX - this.startpageX
                    　//左右事件（打印this.changetall 为正数数/负数判断左右滑动）
                       if(this.changetall > 0) {
                       　  this.index--
                            this.contnnub--
                          if(this.index < 0){

                              //如果当前索<0。则回到最后一张
                              this.index = this.baneerList.length - 1
                              this.contnnub = this.baneerList.length - 1
                          }
                       }else{
                          this.index++
                          this.contnnub++

                           //如果当前索==这个图片数组长度。则回到索引 0 第一张。
                          if(this.index === this.baneerList.length){
                              this.index = 0
                              this.contnnub = 0
                          }
                       }
                        
},

//关闭图片放大

colseImg() {
        this.Urlisshow = false
 },

css补上

.banner-box {
        width: 100%;
        display: flex;
        overflow: auto;
        margin-top: 12px;
    }
    .banner-box .img-url {
        width: 164px;
        height: 293px;
        opacity: 1;
        margin-left: 9px;
        padding: 10px 0  15px 0;
    }
    .banner-box .img-url img {
        width: 164px;
    }

.image-box img {
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 9999;
       transform:scale(0.8);
    }
    .countLenth{
        width: 94%;
        padding: 0 3%;
        position: fixed;
        bottom: 40px;
        display: flex;
        justify-content: center;
    }
    .countLenth span{
        width: 8px;
        height: 8px;
        background: #CCCCCC;
        border-radius: 50%;
        margin-right: 10px;
    }
    .ciuntactive{
        background: #FFFFFF !important;
    }