uni-app uni.previewImage预览图片
<blockquote><p>使用uni.previewImage方法点击图片预览</p>
</blockquote>
<pre><code class="language-html"> <!-- 轮播图 -->
<swiper
class="swiper"
:circular="true"
:indicator-dots="true"
:autoplay="true"
:interval="3000"
:duration="1000"
>
<swiper-item v-for="(item,index) in swiperList" :key="index" @click="preViewPic(item)">
<view class="swiper-item">
<image :src="item" mode=""></image>
</view>
</swiper-item>
</swiper>
</code></pre>
<blockquote>
<p>点击轮播图里的图片，进行预览，swiperList保存图片的地址数组</p>
</blockquote>
<pre><code class="language-javascript">swiperList: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F811%2F0HQ4104127%2F140HQ04127-5-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674093323&t=910c2b4330b8b3096d64b8c2ffd70869',
'https://img1.baidu.com/it/u=1294439722,116143144&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
'https://img0.baidu.com/it/u=946314603,465355950&fm=253&fmt=auto&app=138&f=JPEG?w=461&h=346',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F472309f7905298220ed7b8b5d9ca7bcb0b46d4e4&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674093429&t=54be279b25d753b0877db919c283909f',
'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/bainuo/crop=0,14,470,285;w=470;q=99/sign=969ddebadbc451dae2b956ab8bcd7e57/b8014a90f603738d243f4ac6b51bb051f919ecd9.jpg'
],
</code></pre>
<blockquote>
<p>methods 预览方法</p>
</blockquote>
<pre><code class="language-javascript">// 点击图片预览
preViewPic(item){
uni.previewImage({
urls:this.swiperList,
current:item
})
}
</code></pre>
<p>https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject</p><br><br>
来源：https://www.cnblogs.com/Fantasyfzg/p/16993635.html
頁:
[1]