当前位置:编程学习 > > 正文

vuejs图片缩放裁切(vue+js点击箭头实现图片切换)

时间:2021-10-21 07:17:08类别:编程学习

vuejs图片缩放裁切

vue+js点击箭头实现图片切换

本文实例为大家分享了vue+js点击箭头实现图片切换的具体代码,供大家参考,具体内容如下

vuejs图片缩放裁切(vue+js点击箭头实现图片切换)

前端需求是 返回的图片数据能够点击箭头切换

代码如下

  •  <li class="pubuItemsBox">
            <!-- 修改部分5.23晚 -->
            <template v-for="(orderEvent, index) in orderEventList" >
              <li :class="{'pubuItem':true, 'noMag':(index+1)%3 == 0}">
                <li class="imglis">
                  <template v-if="orderEvent.eventFocuspic.split(',').length > 1">
                    <ins class="left"  @click='change(index,"prev")'></ins>
                    <ins class="right"  @click='change(index,"next")'></ins>
                  </template>
                  <ul class="ulZpImg">
                    <template v-for="(imgUrl,imgUrlIndex) in orderEvent.eventFocuspic.split(',')" >
                      <li v-show='imgUrlIndex===orderEvent.mark'><img :src="getImageUrl(showImg(imgUrl))"></li>
                    </template>
                  </ul>
                </li>
                <li class="txtBox">
                  <span>{{orderEvent.brandName}}</span><ins>档期:{{orderEvent.beginDate}}至{{orderEvent.endDate}}</ins>
                </li>
                <p style="-webkit-box-orient: vertical;">{{orderEvent.eventDesc}}</p>
              </li>
            </template>
          </li>
     
     
    <script>
    change(i, type){
            var obj = this.orderEventList[i];
            var imgLength =obj.eventFocuspic.split(',').length;
            if (type === "prev") {
              if (obj.mark == 0) {
                obj.mark = imgLength - 1
                return
              }
              obj.mark--;
            }
            if (type === "next") {
              if (obj.mark == imgLength - 1) {
                obj.mark = 0
                return
              }
              console.log(obj.mark)
              obj.mark++;
            }
          }
    </script>
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐