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

joan_852024-07-23 8:39

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

  • [01 多图片显示及图片点击放大](#01 多图片显示及图片点击放大)
  • [02 多视频](#02 多视频)
  • [03 全部代码](#03 全部代码)

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


javascript 复制代码 
<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>
javascript 复制代码 
//图片集合
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 多视频

javascript 复制代码 
<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>
javascript 复制代码 
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:

javascript 复制代码 
<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:

javascript 复制代码 
.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

javascript 复制代码 
//获取 图片、视频
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)
},
相关推荐
前端小万4 天前
写公众号赚了 3000 块后，我做了一款叫 "一键成稿" 的软件
前端·微信小程序
美狐美颜SDK开放平台4 天前
开发直播APP时如何接入视频美颜SDK？开发流程与注意事项
android·人工智能·计算机视觉·音视频·直播美颜sdk
2601_955662464 天前
短剧多人对白怎么配？2026年多角色配音工具对比
大数据·人工智能·音视频·语音识别
开发笔记-阿牛4 天前
蓝牙音乐灯拆解,又一次拆到蓝牙音乐灯芯片CK6865L
人工智能·单片机·嵌入式硬件·音视频·音频
拖孩4 天前
代码我能全交给 AI，流量主这 500 个访客它一个都替不了我
前端·后端·微信小程序
旺仔小馒头wang4 天前
AI 智能手机发布会：赋予人类的五种新能力
人工智能·学习·音视频
纳祥科技4 天前
拆机拆到芯片级：ARC功放机里的NX7026、NX8420、NX6805
单片机·音视频·智能音箱
youandyouyou4 天前
律所内部培训共享的内网部署方案：架构、参数与三步落地
音视频
爱吃提升4 天前
文生视频核心
人工智能·音视频
2601_955662464 天前
抖音视频怎么做多语言配音？2026年AI配音工具与制作流程详解
人工智能·音视频·语音识别·视频
热门推荐
01Telegram APK 下载安装完整指南 — 2026年最新02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）032026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享04GitHub 镜像站点05历年考研数学一、数学二、数学三真题试卷及答案PDF06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？09人工智能（AI）发展史：详细里程碑10给AI一张“业务概念地图“：本体如何从哲学走向企业智能