• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序 图片查看

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果。我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现。今天就来教大家如何实现小程序图片点击放大的效果。
 
 
话不多说,直接上代码
JS
   
 var image = res.target.dataset.image
 
    var id = res.target.dataset.id
 
    wx.previewImage({
  //照片集
      urls: this.data.data[id].image,
  单张
      current: image
    })
 
WXML
 
  <block wx:for="{{ data }}" wx:key="data" wx:for-index="ids">
 
    <view>{{ item.title }}</view>
 
  二层循环规则
 
    <view wx:for="{{ item.image }}" wx:for-item="items" wx:key="image">
 
      <image src="{{ items }}" bindtap="images" data-image="{{items}}" data-id="{{ids}}"></image>
 
    </view>
 
    <view wx:for="{{ item.video }}" wx:for-item="items" wx:key="image">
 
      <video src="{{ items }}" data-image="{{items}}" data-id="{{ids}}"></video>
 
    </view>
 
  </block>
  
 
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
二月十三日安卓小程序开发发布时间:2022-07-18
下一篇:
Python小程序练习三之生成器小例子发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap