微信小程序：多图片显示及图片点击放大，多视频显示

于 2024-07-22 11:14:13 发布
阅读量651 收藏 3
点赞数 1
文章标签： 微信小程序 音视频 视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hnn567/article/details/140603812
版权

微信小程序：多图片显示及图片点击放大，多视频显示


在这里插入图片描述

01 多图片显示及图片点击放大

在这里插入图片描述
在这里插入图片描述

<view>
     <view class="title">图片：</view>
     <block wx:if="{{photoUrlList.length==0}}">
         <view class="video-box-noData">无数据</view>
     </block>
     <block wx:if="{{photoUrlList.length > 0}}">
         <view class="photo-box">
             <block wx:for="{{photoUrlList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
                 <image class="photo-class" bindtap="previewImage" data-list="{{photoUrlList}}" data-src="{{item}}"  mode="aspectFit" src="{{item}}"></image>
             </block>
         </view>
     </block>
 </view>

//图片集合
let photoUrlList=[
      'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
      'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
      'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
      'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
      'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
      'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
      'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
  ]
//点击放大
previewImage:function(e) {
    var src = e.currentTarget.dataset.src; // 获取data-src
    var imgList = e.currentTarget.dataset.list;// 获取data-list
    wx.previewImage({
      current: src, // 当前显示图片的地址
      urls: imgList // 所有需要预览的图片是数组对象
    })
},

02 多视频

在这里插入图片描述

<view>
    <view class="title">视频：</view>
    <block wx:if="{{videoUrlList.length==0}}">
        <view class="video-box-noData">无数据</view>
    </block>
    <block wx:if="{{videoUrlList.length > 0}}">
        <view class="video-box">
            <block wx:for="{{videoUrlList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
                <video 
                    id="myVideo" 
                    class="video-class"
                    src="{{item}}" 
                    binderror="videoErrorCallback" 
                    show-center-play-btn='{{true}}' 
                    show-play-btn="{{true}}" 
                    controls
                    show-mute-btn="{{true}}"
                    enable-play-gesture="{{true}}"
                    picture-in-picture-show-progress="{{true}}"
                    show-snapshot-button="{{true}}"
                    picture-in-picture-mode="{{['push', 'pop']}}"
                    bindenterpictureinpicture='bindVideoEnterPictureInPicture'
                    bindleavepictureinpicture='bindVideoLeavePictureInPicture'
                >
                </video>
            </block>
        </view>
    </block>
</view>

let videoUrlList=[
  'http://data.video.iqiyi.com/videos/other/20240311/3f/9e/0424dc6e60f921fb57af60cd58133157.mp4?pv=0.2&pv=0.2',
  'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
  'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
  'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
  'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
  'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
  'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
]

// 视频相关
 bindVideoEnterPictureInPicture() {
     // console.log('进入小窗模式')
 },
 
 bindVideoLeavePictureInPicture() {
     // console.log('退出小窗模式')
 },

 videoErrorCallback(e) {
     console.log('视频错误信息:')
     console.log(e.detail.errMsg)
 },

03 全部代码

wxml:

<view class="detailsWorking">
      <view class="con2">
          <view>
              <view class="title">图片：</view>
              <block wx:if="{{photoUrlList.length==0}}">
                  <view class="video-box-noData">无数据</view>
              </block>
              <block wx:if="{{photoUrlList.length > 0}}">
                  <view class="photo-box">
                      <block wx:for="{{photoUrlList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
                          <image class="photo-class" bindtap="previewImage" data-list="{{photoUrlList}}" data-src="{{item}}"  mode="aspectFit" src="{{item}}"></image>
                      </block>
                  </view>
              </block>
          </view>
          <view>
              <view class="title">视频：</view>
              <block wx:if="{{videoUrlList.length==0}}">
                  <view class="video-box-noData">无数据</view>
              </block>
              <block wx:if="{{videoUrlList.length > 0}}">
                  <view class="video-box">
                      <block wx:for="{{videoUrlList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
                          <video 
                              id="myVideo" 
                              class="video-class"
                              src="{{item}}" 
                              binderror="videoErrorCallback" 
                              show-center-play-btn='{{true}}' 
                              show-play-btn="{{true}}" 
                              controls
                              show-mute-btn="{{true}}"
                              enable-play-gesture="{{true}}"
                              picture-in-picture-show-progress="{{true}}"
                              show-snapshot-button="{{true}}"
                              picture-in-picture-mode="{{['push', 'pop']}}"
                              bindenterpictureinpicture='bindVideoEnterPictureInPicture'
                              bindleavepictureinpicture='bindVideoLeavePictureInPicture'
                          >
                          </video>
                      </block>
                  </view>
              </block>
          </view>
      </view>
      <button class="button" bindtap="detailed">关闭</button>
  </view>

wxcss:

.detailsWorking {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.detailsWorking .con2 {
    position: absolute;
    top: 42rpx;
    left: 20rpx;
    right: 20rpx;
    bottom: 100rpx;
    z-index: 99;
    overflow: auto;
    font-size: 28rpx;
}
.con2 .title{
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #333;
}

.detailsWorking .button {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 26rpx;
    color: #666666;
    padding: 0;
    border-top: 1px solid #f2f2f2;
    background-color: #fff;
    overflow: hidden;
}
.con2 .video-box-noData{
    padding: 20rpx;
    border: 1px solid rgb(111, 189, 134);
}
.photo-box , .video-box{
    padding-left: 20rpx;
    padding-top: 20rpx;
    border: 1px solid rgb(111, 189, 134);
}
.photo-class,.video-class{
    width: 200rpx;
    height: 200rpx;
    border: 1px solid #eeeeee;
    margin-right: 18rpx;
    margin-bottom: 18rpx;
}

js

//获取 图片、视频
photoAndVideo:function(e){
    let that=this;
    let xxx= that.data.xxxx;

    wx.showLoading({title:'查询中...',mask: true});//加载效果
    //查询数据
    app.get(api.xxxx,{
        xxx: xxx,
    }).then(res => {
        //关闭加载效果
        wx.hideLoading();
        if (res.code == 200) {
            let photoUrlList=res.data.photoUrlList ? res.data.photoUrlList : [];
            let videoUrlList=res.data.videoUrlList ? res.data.videoUrlList : [];
           // photoUrlList=[
            //     'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
            //     'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
            //     'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
            //     'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
            //     'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
            //     'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
            //     'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
            // ]
            // videoUrlList=[
            //     'http://data.video.iqiyi.com/videos/other/20240311/3f/9e/0424dc6e60f921fb57af60cd58133157.mp4?pv=0.2&pv=0.2',
            //     'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
            //     'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
            //     'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
            //     'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
            //     'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
            //     'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
            // ]
            //更新数据
            that.setData({
                photoUrlList: photoUrlList,
                videoUrlList: videoUrlList,
            })
        } else {
            //信息提示
            wx.showToast({
                title: res.msg,
                icon: 'none',
                duration: 3000
            })
        }
    }).catch((err) => {
        //关闭加载效果
        wx.hideLoading();
        //信息提示
        wx.showToast({
            title: err,
            icon: 'none',
            duration: 3000
        })
    });
},

// 放大图片
previewImage:function(e) {
    var src = e.currentTarget.dataset.src; // 获取data-src
    var imgList = e.currentTarget.dataset.list;// 获取data-list
    wx.previewImage({
      current: src, // 当前显示图片的地址
      urls: imgList // 所有需要预览的图片是数组对象
    })
},

// 视频相关
bindVideoEnterPictureInPicture() {
    // console.log('进入小窗模式')
},

bindVideoLeavePictureInPicture() {
    // console.log('退出小窗模式')
},

videoErrorCallback(e) {
    console.log('视频错误信息:')
    console.log(e.detail.errMsg)
},
万物可爱_85
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中图片和视频的展示
随便乱写
03-01 216
用户最后点提交的时候再通过wx.uploadFile获取http/https的链接，然后存进数据库。然后可以选择直接赋值给src进行展示，没必要用户选择之后直接上传，因为也有可能删除。关于微信小程序中图片和视频的展示。http://tmp/**这种。
微信小程序实现点击图片放大预览
12-13
这个强大的API( wx.previewImage() )，接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤！ 思路： 1.点击事件 2.放大 3.左右滑动查看上、下一张 在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了) index.wxml <image bind
微信小程序——点击图片放大预览
qq_47902937的博客
03-04 2178
data-src=“{{item}}”：自定义图片地址的属性 可以在点击事件中获取到该属性。有时候我们需要将图片弹出放大预览-使用微信官方给的方法wx.previewImage。代码解读：wx:for=“{{detail.pic}}” 循环渲染需要的图片数组。bind:tap=“previewImage” ：点击触发事件的方法。这个地方是必填选项，其他的可以不填写。
微信小程序点击图片放大
风口浪尖的猪吖
01-06 3922
在平时开发微信小程序图片列表中经常有图片点击放大查看的需求，今天我们就看看小程序是如何实现的呢 1.传参 <block wx:for="{{ImageArr}}" wx:key="index"> //previewImg： 点击的方法 // data-imgUrl： 点击图片传递一个imgUrl的参数，该参数就是当前图片的地址 // data-arr arr参数就是当前循环的图片集合 <image src="{{item.ImageUrl}}" class="img" bind
微信小程序点击图片放大预览，新页面中全屏预览图片
charmingmm815的博客
03-04 5733
微信小程序点击图片放大全盘预览实现方法
微信小程序点击图片放大图片
Sun_Maple_jw的博客
11-16 1898
wx.wxml 最主要的就是bindtap点击事件 <view class="right right_fl" bindtap="previewImg"> <view style="color:#104199;"> 点击查看 </view> <image src="http://mb.webhh.net/xiaochengxu/HRui/vip/message_arr...
微信小程序如何实现点击图片放大功能
10-15
微信小程序实现点击图片放大功能主要涉及小程序的WXML、WXSS和JS三部分代码的编写。通过结合使用这些技术，可以达到用户点击图片后图片全屏显示的效果，类似于移动设备上的图片预览功能。下面将详细介绍这一功能的...
微信小程序内拖动图片实现移动、放大、旋转的方法
10-18
微信小程序是腾讯公司推出的一个无需下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序的主要特点是实现快速连接线上与线下，用户可直接使用微信账号登录、分享...
微信小程序实现图片放大预览功能
08-28
微信小程序实现图片放大预览功能是指在微信小程序中实现图片的放大预览功能，使用户可以点击图片后进行预览，并且可以左右滑动查看图片的上一张和下一张。这种功能在微信小程序中非常常见，例如在电商平台、社交媒体...
微信小程序-上传照片-多张显示
weixin_30443895的博客
01-18 616
图片就是一个简单的效果 实现 先看wxml和wxss代码 <view class='in-demand'> <view class='dema-title'> <text>上传图片：（最少1张）</text> </view> <view class='demand-col ...
微信小程序图片放大预览，并双击可缩小的原始比例
04-09
微信小程序图片放大预览，并双击可缩小的原始比例，利用scroll-view实现
微信小程序大图预览功能
最新发布
qq_51528868的博客
03-10 672
举例:点击轮播图中的图片可以实现大图预览功能。注意urls需要的类型。
初学者笔记——微信小程序点击图片放大
leoliu2020的博客
02-11 8319
学习笔记：微信小程序点击图片放大
【微信小程序】小程序点击图片放大(图片预览)
热门推荐
疾术客
05-15 1万+
这个强大的API( wx.previewImage() )，嘿嘿嘿！接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤！ 思路： 1.点击事件 2.放大 3.左右滑动查看上、下一张 在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了) index.wxml <view ...
【微信小程序】点击图片放大预览
qq_25285531的博客
11-06 1310
微信小程序点击图片放大预览使用到wx.previewImage接口，可以放大、上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}...
微信小程序点击查看大图
PEACEMINUSON的博客
06-30 1932
1，给图片添加点击事件 2，调用微信开发工具api
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值