微信小程序实现图片放大预览保存和滑动功能 2021-09-01 07:53 537阅读 0赞 # 效果图 # 右边是手机展示效果 ![2020081419555551.gif][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70_pic_left][] # WXML文件 # <view class="container"> <view class="wrap"> <view class="item" wx:for="{ {list}}" wx:key="index"> <view class="top"> <view class="img"> <image src="{ {item.img[0]}}" bindtap="previewImage" data-src="{ {item.img[0]}}" data-srclist="{ {item.img}}"> </image> </view> <view class="desc"> <view class="title">{ {item.name}}</view> <view class="subtitle">{ {item.subtitle}}</view> <view class="type">{ {item.type}}</view> <view class="duration">{ {item.producePlace}} / { {item.duration}}分钟</view> <view class="opentime">{ {item.releaseDate}} { {item.releasePlace}}</view> <view class="btn-group"> <button class="btn" hover-class="btnhover">想看</button> <button class="btn" hover-class="btnhover">评分</button> </view> </view> </view> </view> </view> </view> # JS文件 # 图片预览放大后,长按图片可保存至本地、转发和收藏 //获取应用实例 const app = getApp() Page({ data: { list: [ { name: '唐人街探案3', subtitle: 'Detective Chinatown 3', type: '喜剧 悬疑', duration: '136', producePlace: '中国大陆', releaseDate: '2020-10-01', releasePlace: '中国大陆上映', img: ['https://p0.meituan.net/movie/b0e0d6ce9914f37e7f9f6ade13e096342721150.jpg@464w_644h_1e_1c'], plot: '继曼谷、纽约之后,东京再出大案。唐人街神探唐仁(王宝强 饰)、秦风(刘昊然 饰)受侦探野田昊(妻夫木聪 饰)的邀请前往破案。“CRIMASTER世界侦探排行榜”中的侦探们闻讯后也齐聚东京,加入挑战,而排名第一Q的现身,让这个大案更加扑朔迷离,一场亚洲最强神探之间的较量即将爆笑展开……' }, { name: '我在时间尽头等你', subtitle: 'Love You Forever', type: '爱情 奇幻 喜剧', duration: '115', producePlace: '中国大陆', releaseDate: '2020-08-25', releasePlace: '中国大陆上映', img: ['https://p0.meituan.net/moviemachine/7e6118993dbf0f304ac1dad4667fddda207318.jpg@218w_300h_1e_1c'], plot: '林格(李鸿其 饰)一次次重启时空,只为与恋人邱倩(李一桐 饰)再次相遇。一生只爱一个人,希望开头是你,结尾也是你。2020年七夕最深情的告白: 我在时间尽头等你。' }, { name: '我和我的家乡', subtitle: 'My Hometown And I', type: '剧情 喜剧', duration: '120', producePlace: '中国大陆', releaseDate: '2020-10-01', releasePlace: '中国大陆上映', img: ['https://p0.meituan.net/movie/3e9c5b91940cd5c75a12916e66528a404269063.jpg@464w_644h_1e_1c'], plot: '' }, { name: '八佰', subtitle: 'The Eight Hundred', type: '剧情 战争 历史', duration: '147', producePlace: '中国大陆', releaseDate: '2020-08-21', releasePlace: '中国大陆上映', img: ['https://p1.meituan.net/moviemachine/a448ca6a5f4dafb88067722303ca0cfd96002.jpg@464w_644h_1e_1c'], plot: '1937年淞沪会战的最后一役,“八百壮士”奉命坚守上海四行仓库,以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演,是亚洲首部全片使用IMAX摄影机拍摄的商业电影,将于2020年8月21日全国影院上映。' }, { name: '姜子牙', subtitle: 'JIANG ZIYA:Legend Of Deification', type: '动画 动作 冒险', duration: '110', producePlace: '中国大陆', releaseDate: '2020-10-01', releasePlace: '中国大陆上映', img: ['https://p0.meituan.net/movie/3dc44919f0917b5823c867813f29fba42625689.jpg@464w_644h_1e_1c'], plot: '昆仑弟子姜子牙(郑希 配音)率领众神伐纣,赢得封神大战胜利。即将受封成为众神之长的他,却因一时过失引得昆仑大乱,从此被贬北海,为世人所唾弃。十年后,因一个契机,姜子牙踏上重回昆仑的旅途。在战后的废墟之上,他重新找到自我,也洞悉了十年前的一切真相。' }, { name: '小妇人', subtitle: 'Little Women', type: '爱情 剧情', duration: '135', producePlace: '美国', releaseDate: '2020-08-25', releasePlace: '中国大陆上映', img: ['https://p0.meituan.net/movie/cdb164c203fc0c2465278ddd165e91c84503798.jpg@464w_644h_1e_1c'], plot: '马奇夫人和四个多才多艺但性格各异的女儿一起过着平凡又温馨的生活。梅格贤惠温柔,是为爱痴狂的浪漫主义者;贝丝聪慧娴静,擅长钢琴;艾米年纪最小,有漂亮的外表和现实的头脑;而最特立独行的是乔,她有些男孩子气,热爱写作,在女孩都以嫁人为目标的年代,她立志成为一名独立女性。富有又帅气的青年劳里和乔青梅竹马两小无猜,对乔一见钟情,但乔面对劳里的表白却心烦意乱,决定独自前往纽约追求写作事业。经历了现实的洗礼后,乔逐渐明白了自己对于劳里的心意,却发现劳里即将迎娶妹妹艾米……' } ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, // 查看大图 previewImage(e) { var current = e.target.dataset.src var srclist = e.target.dataset.srclist wx.previewImage({ current: current, // 当前显示图片的http链接 urls: srclist // 需要预览的图片http链接列表 }) } }) # WXSS文件 # page { background: #f6fbff; } .container { width: 100%; } .wrap { width: 100%; padding: 30rpx 20rpx; box-sizing: border-box; } .item { width: 100%; border: 1rpx solid #acacac80; border-radius: 10rpx; background: #fff; padding: 15rpx; box-sizing: border-box; margin-bottom: 20rpx; } .item .top { display: flex; justify-content: flex-start; } .item .top .img { flex: 0 0 260rpx; height: 360rpx; margin-right: 20rpx; } .item .top .img image { width: 100%; height: 100%; } .item .top .desc { flex: 1; width: 0; font-size: 29rpx; } .item .top .desc .title { font-size: 36rpx; font-weight: bold; margin-bottom: 10rpx; } .item .top .desc .subtitle { margin-bottom: 30rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .item .top .desc .type { margin-bottom: 10rpx; } .item .top .desc .duration { margin-bottom: 10rpx; } .item .top .desc .opentime { margin-bottom: 30rpx; } .item .top .desc .btn-group { width: 100%; display: flex; justify-content: flex-start; } .item .top .desc .btn-group .btn { width: 186rpx; height: 60rpx; background: #ffaa7f; border-radius: 30rpx; font-size: 29rpx; font-weight: normal; text-align: center; line-height: 60rpx; color: #fff; margin: 0; padding: 0; } .item .top .desc .btn-group .btn:first-child { margin-right: 20rpx; } .item .top .desc .btn-group .btnhover { background: #ea986c; } [2020081419555551.gif]: https://img-blog.csdnimg.cn/2020081419555551.gif [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70_pic_left]: /images/20210813/53ed714379b14927ae90f8bfe60e45eb.png
相关 小程序放大预览图片,并可左右滑动 data: { list:[ { url:'图片链接'}, { url:'图片链接'}, { url: 绝地灬酷狼/ 2022年10月20日 00:56/ 0 赞/ 64 阅读
相关 微信图片预览 微信公众号开发中,点击查看大图, 其实不需要再写js效果直接调用微信app的预览功能即可 用例: <script> //图片列表 男娘i/ 2022年08月04日 13:47/ 0 赞/ 246 阅读
相关 小程序实现图片预览功能 为什么要实现小程序图片预览功能? 因为有些图片太小,我们需要将图片放大,才能查看图片上的信息。 为了实现这项功能我们需要调用该函数: var current Bertha 。/ 2022年06月03日 08:40/ 0 赞/ 245 阅读
相关 微信小程序图片预览保存发送给朋友previewImage 先看看手机上的效果 ![这里写图片描述][SouthEast] js实现的代码: wx.previewImage({ curren 逃离我推掉我的手/ 2022年06月01日 03:08/ 0 赞/ 160 阅读
相关 微信小程序实现弹窗预览图片 今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章 [微信 梦里梦外;/ 2022年05月28日 10:59/ 0 赞/ 492 阅读
相关 微信小程序:点击图片预览 做微信小程序的时候使用的图片大小不尽相同,为了让使用者能够浏览原图,就需要给图片添加点击预览的功能,下面我详细介绍一下实现步骤, 首先介绍微信小程序文档中的使用教程: ![ 妖狐艹你老母/ 2022年04月03日 03:14/ 0 赞/ 418 阅读
相关 微信小程序 实现上传图片并可以预览图片 我的qq 2038373094 我做的是微信小程序、网站、手机app,后端java+前端vue、bootstrap框架、原生的html+css+js都会 做过律师在线咨 刺骨的言语ヽ痛彻心扉/ 2022年01月28日 10:05/ 0 赞/ 336 阅读
相关 微信小程序选择图片和预览图片 选择图片 视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage(\{\}) 此方法是用来选择图片的方法,具体使用 素颜马尾好姑娘i/ 2021年09月17日 00:28/ 0 赞/ 471 阅读
相关 微信小程序wx.previewImage预览图片 一.小知识 ![20170525131248116][] 二.例子 1.wxml <view class="container"> <view wx:fo ゞ 浴缸里的玫瑰/ 2021年09月12日 07:30/ 0 赞/ 455 阅读
相关 微信小程序实现图片放大预览保存和滑动功能 效果图 右边是手机展示效果 ![2020081419555551.gif][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh 不念不忘少年蓝@/ 2021年09月01日 07:53/ 0 赞/ 538 阅读
还没有评论,来说两句吧...