【uni-app/微信小程序】预览图片（单张、多张）uni.previewImage()
<p>uni-app官网：https://uniapp.dcloud.io/api/media/image?id=previewimage<br>微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html</p>
<h2 id="uniapp-实现图片预览-单图预览和多图预览">uniapp 实现图片预览 单图预览和多图预览</h2>
<p>关键点就是调用</p>
<pre><code class="language-js">uni.previewImage({
current: index,
urls: photoList
});
</code></pre>
<p>如果是单图预览，current对应就是0，urls：必须是单个某一条传入。因为现在预览一张图片，你的current传死就是0.所以urls也必须是字符串形式</p>
<p>如果是多图预览，current，对应就是在循环图片数据的<code>索引</code>,urls: 是数组形式传入。因为uni.previewImage 要根据 current的索引，来动态匹配urls里面的数据</p>
<p>下面代码演示</p>
<h2 id="单图预览模式">单图预览模式</h2>
<pre><code class="language-js">previewImg(photoImg) {
let imgsArray = [];
imgsArray = photoImg;
uni.previewImage({
current: 0,
urls: imgsArray
});
}
</code></pre>
<h2 id="多图预览模式">多图预览模式</h2>
<pre><code class="language-html"><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>
</code></pre>
<h2 id="js-map的方法">js map()的方法</h2>
<p>参考：</p>
<p>1、map()方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。</p>
<p>2、map()方法按照原始数组元素顺序依次处理元素。</p>
<p>注意：</p>
<ul>
<li>
<p>map()不会对空数组进行检测。</p>
</li>
<li>
<p>map()不会改变原始数组。</p>
</li>
<li>
<p>map() 函数的作用是对数组中的每一个元素进行处理，返回新的元素。</p>
</li>
</ul>
<p>用法：</p>
<p><code>array.map(function(item,index,arr){})</code></p>
<p>item：必须。当前元素的的值。</p>
<p>index：可选。当前元素的索引。</p>
<p>arr：可选。当前元素属于的数组对象。</p>
<p>示例：</p>
<pre><code class="language-js">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"]
</code></pre>
<pre><code class="language-js">let array = ;
let newArray = array.map((item) => {
return item * item;
})
console.log(newArray)//
</code></pre><br><br>
来源：https://www.cnblogs.com/cdnotes/p/14416041.html
頁:
[1]