效果圖：
下面代碼講解：
wxml部分：
?我們?cè)O(shè)置橫向滾動(dòng)，使用wx:for來遍歷數(shù)據(jù)源彭谁，并設(shè)置圖片的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;}
設(shè)置寬，居中颗祝，內(nèi)邊距外邊距等
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"? ? }
? ? ]
? },
? // 圖片預(yù)覽
? img: function (e) {
? ? var that = this;
? ? var all_pic = [];
? ? var url = e.currentTarget.dataset.url
? ? console.log("點(diǎn)擊的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, // 當(dāng)前顯示圖片的http鏈接
? ? ? urls: all_pic // 需要預(yù)覽的圖片http鏈接列表
? ? })
?}
})
初始化數(shù)據(jù)源氮墨，在設(shè)置點(diǎn)擊事件，將數(shù)據(jù)源加載到數(shù)組中去吐葵，并獲取點(diǎn)擊預(yù)覽圖片的url。
注意預(yù)覽圖片wx.previewImage不支持本地圖片哦桥氏。
