vue（4）图片页面

一、基本数据配置

1. 图片页面与图片详情页面中使用的数据为同一数据，在store下的index.js中的state里设置photolist空数组，mutations里设置setphotolist方法

   

   setphotolist方法用于将传来的data值赋值给state中的photolist数组

二、图片页面（引入mapState）

2. 在created中通过axios请求数据，请求成功后调用setphotolist方法，将接收的数据传给setphotolist方法

   

3. 在页面中将图片展示出来，由于图片信息中不存在id值，所以将:key值设为index

   

4. 点击图片时触发点击事件，在方法中将图片索引传值给图片详情页面路由

   

三、图片详情页面

5. 图片详情页面中，为页面设置背景色，由于容器没有宽高，故此需要通过绝对定位设置背景色

   

6. 页面中通过photolist[index].src将图片引入，index需要在data中通过路由信息this.$route.params.index拿到

   

   

7. 引入滑动组件，当滑动图片时进入上一张或下一张图片

   

   

8. 页面中引入v-touch标签，通过v-on:绑定左滑和右滑方法

   

9. 在滑动方法中
   左滑时，index++进入下一张图片，当图片为最后一张，则直接返回不再执行以防报错
   右滑时，index--进入上一张图片，当图片为第一张，则直接返回不再执行以防报错