效果图：
下面代码讲解：
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不支持本地图片哦。