用户登录

点击界面上的图像,会显示一个图像预览窗口,这个功能可以使用一下 wx.previewImage 这个接口 .. 在这个 image 组件上面,可以 bind 一个 tap 事件,这个事件用 preview 来处理 ..

在页面的主逻辑里面再添加一个 preview 方法 .. 接收一个 event 参数 .. 在这个事件处理方法里面,用一下 wx.previewImage ,给它一个对象,里面可以配置一下这个接口的使用 ..

先添加一个 urls 属性 .. 它的值就是一组要预览的图像文件的地址列表 .. 这里可以用一下 this.data.images .. 我们会把选择的图像路径列表放在页面数据里的 images 属性这里 ..

回去预览一下 .. 选择几张图片 .. 然后点击图像 .. 这样会出现一个预览图像的窗口.. 左右滑动,可以预览这种图像 ..

默认这个图像预览会从第一张图像开始 ..

current

再回去设置一下 .. 在这个 image 组件的上面,可以再添加一个自定义的属性,名字是 data-src .. 给它绑定一个 item ..

然后在 previewImage 这个接口里面,再添加一个 current .. 设置一下当前要预览的图像地址 .. 它的值可以是 event.target.dataset.src

再去预览一下 . 先选择几张图像 ...

然后点击其中的一张图像 .. 这样打开预览窗口的时候,当前显示的就是我们点击的这张图像 ..

图像预览窗口:wx.previewImage《 微信小程序:接口 》

统计

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

社会化网络

关于

微信订阅号

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