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

效果图：

下面代码讲解：

wxml部分：

< scroll-view class= 'box-sv' scroll-x >

< image wx:for= "{{img}}" wx:key= "{{index}}" src= '{{item.ImgUrl}}' bindtap= 'img' mode= "aspectFill" data-url= '{{item.ImgUrl}}'></ image >

</ scroll-view >

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

wxss部分：

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

.box-sv image{ width: 200 rpx; height: 133 rpx; margin-right: 20 rpx; 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不支持本地图片哦。