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

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)
},
相关推荐
HerayChen2 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
简鹿办公4 小时前
如何提取某站 MV 视频中的音乐为 MP3 音频
音视频·简鹿视频格式转换器·视频提取mp3音频
yufengxinpian4 小时前
集成了高性能ARM Cortex-M0+处理器的一款SimpleLink 2.4 GHz无线模块-RF-BM-2340B1
单片机·嵌入式硬件·音视频·智能硬件
runing_an_min6 小时前
ffmpeg视频滤镜：替换部分帧-freezeframes
ffmpeg·音视频·freezeframes
中云DDoS CC防护蔡蔡8 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
runing_an_min8 小时前
ffmpeg视频滤镜：提取缩略图-framestep
ffmpeg·音视频·framestep
小曲曲9 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
安静读书12 小时前
Python解析视频FPS(帧率)、分辨率信息
python·opencv·音视频
佑华硬盘拷贝机12 小时前
音频档案批量拷贝：专业SD拷贝机解决方案
音视频
井眼12 小时前
微信小程序-prettier 格式化
微信小程序·小程序
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作