taro图片预览，微信小程序图片预览

思路

调用微信小程序的预览图片api–wx.previewImage，灰常简单

效果图

页面

预览效果

详例

import Taro from '@tarojs/taro';
import { Component } from 'react'
import { View, Image } from '@tarojs/components';
import './preview.less'

export default class Preview extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      imgs: ['https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b2de9c82d158ccbfb40a4fd81bd8bc3eb035419a.jpg',
        'https://static2.zugeliang01.com/20210723/44170dd79cd355436ad0e657a1220070.jpeg',
        "https://static2.zugeliang01.com/20210723/86a7bf6e8919a2a45249817c9f52cf75.jpeg",
      ]
    }
  }

  previewImage=(img)=>{
    Taro.previewImage({
      current: img, // 当前显示图片的http链接  
      urls: this.state.imgs // 需要预览的图片http链接列表  
    })
  }

  render() {
    return (
      <View className='preview-page-wrap'>
        {this.state.imgs.map(item => {
          return <Image className="pimg" key={item} src={item} onClick={this.previewImage.bind(this, item)}></Image>
        })}
      </View>
    )
  }
}

注意用带有http或https的网络图