【uni-app/微信小程序】预览图片（单张、多张）uni.previewImage()

uniapp 实现图片预览单图预览和多图预览

关键点就是调用

uni.previewImage({current: index,urls: photoList});

如果是单图预览，current对应就是0，urls：必须是单个某一条传入。因为现在预览一张图片，你的current传死就是0.所以urls也必须是字符串形式

如果是多图预览，current，对应就是在循环图片数据的索引,urls: 是数组形式传入。因为uni.previewImage 要根据 current的索引，来动态匹配urls里面的数据

下面代码演示

单图预览模式

previewImg(photoImg) {let imgsArray = [];imgsArray[0] = photoImg;uni.previewImage({current: 0,urls: imgsArray});}

多图预览模式

<template><view><view>预览图片</view><view class="photosView"><block v-for="(item, index) in photos" :key="index"><view class="box"><image :src="item.src" mode="widthFix" @click="previewImage(index)"></image></view></block></view></view></template><script>export default {data() {return {photos: [{id: '1',src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807923709&di=dda3e0b4d055c8dfaaaa9168c570983a&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170331%2F20170331113141_98c8105e504ff71e68d59a6eaa30bd7e_5.jpeg'},{id: '2',src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807923711&di=6b8dfec17f7be8213ae23db6e1b7719a&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170509%2F20170509200320_7dacf48b2bcc4b4ab7a0412b333ccb99_6.jpeg'},{id: '3',src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807858562&di=262d91cfb1292942a257d17973a4843c&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170303%2F20170303094555_7851ce3d965701f3201d4df2dde56592_8.jpeg'},{id: '4',src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807923711&di=61c1d93f123d6039af37727812c64456&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170318%2F20170318103604_eea6fa2eab8da83f770158463b7201f7_2.jpeg'}]};},methods: {previewImage(index) {let photoList = this.photos.map(item => {return item.src;});uni.previewImage({current: index,urls: photoList});}}};</script><style scoped lang="less">* {margin: 0;padding: 0;}.photosView {display: flex;justify-content: space-between;flex-wrap: wrap;.box {width: 30%;image {width: 100%;height: 100%;}}}</style>

js map()的方法

参考：

1、map()方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。

2、map()方法按照原始数组元素顺序依次处理元素。

注意：

map()不会对空数组进行检测。
map()不会改变原始数组。
map() 函数的作用是对数组中的每一个元素进行处理，返回新的元素。

用法：

array.map(function(item,index,arr){})

item：必须。当前元素的的值。

index：可选。当前元素的索引。

arr：可选。当前元素属于的数组对象。

示例：

const list = ["min","list","do","mo"]const pro = list.map((item,index,array)=>{ // item 原数组的 每一个元素// index 原数组 下标// 当前元素属于 的数组对象return item + "1"   // 处理后可以返回一个新数组})console.log(pro) // 打印结果 (4) ["min1", "list1", "do1", "mo1"]

let array = [1, 2, 3, 4, 5];let newArray = array.map((item) => {    return item * item;})console.log(newArray)  // [1, 4, 9, 16, 25]

单图预览模式

多图预览模式

js map()的方法

更多相关文章

随机推荐