用户登录

自由学三年,把想法变成现实。33 折优惠(最后 6 天), 现在订阅 →

用户按一下产品页面上的图片,我希望可以显示一个图片预览窗口,这样用户可以更好地浏览这些图片 .. 先打开产品详情页 .. 找到想要可以预览的这个图像组件 .. 在它上面绑定一个 tap 事件 .. bindtap .. 然后指定用 preview 这个方法来处理 ..

按下图片,打开预览窗口,可以预览一组特定的图片,我们要得到这组特定的图片 .. 在这个 image 上面,再添加一个 data-slides .. 设置一下这组幻灯片是谁 .. 这个是 exterior_design .. 按下图片,我们要显示当前被按的图片 .. 这里再添加一个 data-index .. 这个 data-slides 还有 data-index 都是我们自己定义的属性 ..

在事件处理方法里面,我们可以得到这些属性的值 .. 这个 data-index 的值,给它绑定一个 index .. 就是循环的时候项目的索引值 .. 我们要用到这个值来判断按下图片要显示的图片到底是哪个 ..

再把这些属性添加到下面这个幻灯片里的图像组件上 .. 修改这个 data-slides 的值,这个是 interior_design ..

逻辑

再打开页面的逻辑文件 ... 在这里添加一个事件处理方法 .. 名字就是 preview .. 一个 event 参数,表示事件 ..

在它里面我们先得到被点的图像元素上的 slides 还有 index 这两个自定义属性的值 .. const slidesName 等于 .. event.target.dataset.slides ..

const index = event.target.dataset.index

下面我们可以根据 slidesName ,得到对应的 slides 数据 .. const slides .. this.data.entity.meta[slidesName]

我们可以从这组幻灯片里面把所有的图像地址都提取出来 .. 先添加一组空白的数据 .. const images = []..

再用 map 处理一下 slides 里的数据 .. 每个项目叫 item .. images.push ,把 item 里的 image push 到 images 里面 ..

现在我们就有了一组要显示的图像地址 .. 下面用一下 wx.previewImage 这个接口 .. 一个对象参数 .. urls 设置一下要显示的一组图像 .. 这里就是 images ..

再添加一个 current ,设置一下当前要显示的图片 .. images,再用一下上面得到的索引值,可以定位到要当前要显示的图片 .. images[index]

预览

完成以后,可以到模拟器上预览一下 .. 按一下幻灯片上的图像 .. 会显示一个图像预览窗口 ..

再试一下内饰上的图片 ... 同样会显示一个图像预览窗口 ..

现在我们这个产品详情页面就做好了 .. 回到视图 .. 去掉这块注释 ..

然后可以再去预览一下 ...

产品详情页:图片预览《 微信小程序:案例 》

统计

10670
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点