vue图片左右滑动切换

Question

最近有业务需求想写一个vue项目中图片点击预览，可以左右用手指滑动切换图片，类似九宫格缩略图，点击放大，左右滑动到上下张图片的效果，目前实现手动左右点击图标切换，但没实现滑动切换图片，求大佬赐教！

<div 
                class="img-box img-two" 
                v-if="listData.activityImageList.length 
                      && listData.activityImageList.length>=2 
                      && listData.activityImageList.length<4">
                <div>
                  <img 
                    :src="`${API}/image/activity/${listData.activityImageList[0].thumbnailName}`"
                    v-preview="`${API}/image/activity/${listData.activityImageList[0].imageName}`" 
                    preview-title-enable="true"
                    preview-nav-enable="true"/>
                </div>
                <div>
                  <img 
                    :src="`${API}/image/activity/${listData.activityImageList[1].thumbnailName}`"
                    v-preview="`${API}/image/activity/${listData.activityImageList[1].imageName}`" 
                    preview-title-enable="true"
                    preview-nav-enable="true"/>
                </div>
              </div>

这里用的是vue的vue-pcture-preview的组件，但是只能点击图标切换图片，不可以滑动切换图标，有大佬分享一下经验吗，我有考虑过vue-preview，但是不会！

Answer 1

滑动有事件的 touchstart与touchmove，touchend与touchcancel。