小程序scroll-view展示图片和预览图片

效果图：

效果图

下面代码讲解：

wxml部分：

 我们设置横向滚动，使用wx:for来遍历数据源，并设置图片的mode：aspectFill，图片的mode就不介绍了，不清楚的可以去小程序官方api查看。

wxss部分：

.box-sv{width: 700rpx;padding: 20rpx 0;height: 133rpx;white-space:nowrap;margin:3% auto}

.box-sv image{width: 200rpx;height: 133rpx;margin-right: 20rpx;border-radius: 5px;}

设置宽，居中，内边距外边距等

js部分：

Page({

  data: {

    img: [{

      ImgUrl: "http://zhaozhuanxian.oss-cn-shanghai.aliyuncs.com/henglixiangxiaochengxu/1.png"    },

    {      ImgUrl: "http://zhaozhuanxian.oss-cn-shanghai.aliyuncs.com/henglixiangxiaochengxu/2.png"    },

    {      ImgUrl: "http://zhaozhuanxian.oss-cn-shanghai.aliyuncs.com/henglixiangxiaochengxu/3.png"    },

    {      ImgUrl: "http://zhaozhuanxian.oss-cn-shanghai.aliyuncs.com/henglixiangxiaochengxu/4.png"    },

    {      ImgUrl: "http://zhaozhuanxian.oss-cn-shanghai.aliyuncs.com/henglixiangxiaochengxu/5.png"    },

    {      ImgUrl: "http://zhaozhuanxian.oss-cn-shanghai.aliyuncs.com/henglixiangxiaochengxu/6.png"    },

    {      ImgUrl: "http://zhaozhuanxian.oss-cn-shanghai.aliyuncs.com/henglixiangxiaochengxu/7.png"    },

    {      ImgUrl: "http://zhaozhuanxian.oss-cn-shanghai.aliyuncs.com/henglixiangxiaochengxu/8.png"    },

    {      ImgUrl: "http://zhaozhuanxian.oss-cn-shanghai.aliyuncs.com/henglixiangxiaochengxu/9.png"    }

    ]

  },

  // 图片预览

  img: function (e) {

    var that = this;

    var all_pic = [];

    var url = e.currentTarget.dataset.url

    console.log("点击的url：", e);

    for (var i = 0; i < that.data.img.length; i++) {

            var imgs = that.data.img[i].ImgUrl

      all_pic.push(imgs)

    }

    wx.previewImage({

      current: url, // 当前显示图片的http链接

      urls: all_pic // 需要预览的图片http链接列表

    })

 }

})

初始化数据源，在设置点击事件，将数据源加载到数组中去，并获取点击预览图片的url。

注意预览图片wx.previewImage不支持本地图片哦。

小程序scroll-view展示图片和预览图片 - CSDN博客