效果圖：

下面程式碼講解：

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: 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不支援本地圖片哦。