点击图片放大图片预览左右切换
Posted jspang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击图片放大图片预览左右切换相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>点击图片放大图片预览左右切换</title> 8 <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet"> 9 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> 10 <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script> 11 <style> 12 .el-image__inner { 13 width: 100%; 14 height: 100%; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="app"> 20 <div class="demo-image__preview"> 21 <el-image 22 style="width: 100px; height: 100px" 23 :src="url" 24 :preview-src-list="srcList"> 25 </el-image> 26 </div> 27 <el-table 28 :data="tableData" 29 style="width: 100%"> 30 <el-table-column 31 label="图片" 32 width="180"> 33 <template slot-scope="scope"> 34 <el-image 35 style="width: 100px; height: 100px" 36 :src="scope.row.url" 37 :preview-src-list="scope.row.srcList" 38 > 39 </el-image> 40 </template> 41 </el-table-column> 42 <el-table-column 43 prop="date" 44 label="日期" 45 width="180"> 46 </el-table-column> 47 <el-table-column 48 prop="name" 49 label="姓名" 50 width="180"> 51 </el-table-column> 52 <el-table-column 53 prop="address" 54 label="地址"> 55 </el-table-column> 56 </el-table> 57 </div> 58 59 <script> 60 var app = new Vue({ 61 el: ‘#app‘, 62 data() { 63 return { 64 url: ‘https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg‘, 65 srcList: [ 66 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘, 67 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘ 68 ], 69 tableData: [{ 70 date: ‘2016-05-02‘, 71 name: ‘王小虎‘, 72 address: ‘上海市普陀区金沙江路 1518 弄‘, 73 url: ‘https://cn.bing.com/th?id=OIP.4Zu1i_Id-ZHrm2qXDSghwAHaEz&pid=Api&rs=1‘, 74 srcList: [ 75 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘, 76 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘ 77 ] 78 79 }, { 80 date: ‘2016-05-04‘, 81 name: ‘王小虎‘, 82 address: ‘上海市普陀区金沙江路 1517 弄‘, 83 url: ‘http://photocdn.sohu.com/20100628/Img273133689.jpg‘, 84 srcList: [ 85 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘, 86 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘ 87 ] 88 }, { 89 date: ‘2016-05-01‘, 90 name: ‘王小虎‘, 91 address: ‘上海市普陀区金沙江路 1519 弄‘, 92 url: ‘http://www.fj.xinhuanet.com/titlepic/112424/1124243097_1552731566217_title0h.jpg‘, 93 srcList: [ 94 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘, 95 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘ 96 ] 97 }, { 98 date: ‘2016-05-03‘, 99 name: ‘王小虎‘, 100 address: ‘上海市普陀区金沙江路 1516 弄‘, 101 url: ‘http://pica.nipic.com/2008-03-26/2008326165225669_2.jpg‘, 102 srcList: [ 103 ‘https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg‘, 104 ‘https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg‘ 105 ] 106 }] 107 } 108 } 109 }) 110 </script> 111 </body> 112 </html>
以上是关于点击图片放大图片预览左右切换的主要内容，如果未能解决你的问题，请参考以下文章
Android 实现仿微信朋友圈九宫格图片+NineGridView+ImageWatcher(图片查看:1.预览，2.拖动，3.放大，4.左右滑动，5.长按保存到手机)的功能