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

news2024/11/24 9:07:36

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

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

在这里插入图片描述

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)
},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1942122.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

什么是离线语音识别芯片？与在线语音识别的区别

什么是离线语音识别芯片？与在线语音识别的区别

离线语音识别芯片是一种不需要联网和其他外部设备支持&#xff0c;‌上电即可使用的语音识别系统。‌它的应用场合相对单一&#xff0c;‌主要适用于智能家电、‌语音遥控器、‌智能玩具等&#xff0c;‌以及车载声控和一部分智能家居。‌离线语音识别芯片的特点包括小词汇量、…
阅读更多...
【JavaEE】AQS原理

【JavaEE】AQS原理

本文将介绍AQS的简单原理。 首先有个整体认识&#xff0c;全称是 AbstractQueuedSynchronizer&#xff0c;是阻塞式锁和相关的同步器工具的框架。常用的ReentrantLock、Semaphore、CountDownLatch等都有实现它。 本文参考&#xff1a; 深入理解AbstractQueuedSynchronizer只需…
阅读更多...
2.5.LeNet

2.5.LeNet

1.LeNet ​ LeNet-5由两个部分组成: 卷积编码器&#xff1a;由两个卷积层组成全连接层密集块&#xff1a;由三个全连接层组成 ​ 先试用卷积层来学习图片空间信息&#xff0c;然后使用全连接层来转换到类别空间 ​ 第一层卷积层要padding一下&#xff0c;收集边框的信息&…
阅读更多...
数据清洗系统设计

数据清洗系统设计

设计一个高效的数据清洗系统旨在确保数据的质量&#xff0c;以便后续分析和决策过程可以基于准确、一致和完整的信息。以下是设计实时数据清洗系统时需要考虑的关键要素&#xff0c;结合之前提到的设计目标和原则&#xff1a; 1. 高效的数据处理 技术选型&#xff1a;采用并行…
阅读更多...
git遇到OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 0

git遇到OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 0

最简单的方法&#xff0c;直接忽略SSL证书错误就好 一般是代理http/https或者其他问题导致的 直接输入 git config --global http.sslVerify "false" 即可
阅读更多...
数学建模学习（2）——决策树

数学建模学习（2）——决策树

import pandas as pd from sklearn.model_selection import train_test_split from sklearn.tree import DecisionTreeClassifier from sklearn.metrics import accuracy_score dfpd.read_excel(股票客户流失.xlsx) xdf.drop(columns是否流失)#x等于除是否流失这一列以外的数据…
阅读更多...
layui+thymeleaf+jquery实现多图片，多视频的上传、预览、放大、编辑功能

layui+thymeleaf+jquery实现多图片，多视频的上传、预览、放大、编辑功能

layuithymeleafjquery实现多图片&#xff0c;多视频的上传、预览、放大、编辑功能 html: <!--多图片上传--> <div class"layui-row layui-col-space10"><div class"layui-form-item"><div class"layui-form-item layui-form-te…
阅读更多...
证书上的服务器名错误解决方法

证书上的服务器名错误解决方法

方法 win r &#xff0c;输入mmc 点击文件——>添加/删除管理单元 找到证书——> 添加 根据自己的存放选择存放位置 点击控制台根节点——> 受信任的根证书颁发机构——>导入 若还出现问题&#xff0c;则参考https://blog.csdn.net/mm120138687/article/details/…
阅读更多...
【BUG】已解决：The above exception was the direct cause of the following exception:

【BUG】已解决：The above exception was the direct cause of the following exception:

The above exception was the direct cause of the following exception: 目录 The above exception was the direct cause of the following exception: 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c…
阅读更多...
uniapp中出现Uncaught runtime errors

uniapp中出现Uncaught runtime errors

项目中运行出现上面的错误信息&#xff0c;使用uniapp发现&#xff0c;其实我只是跨域了&#xff0c;控制台报错&#xff0c;但是不想屏幕上显示&#xff1b; 解决办法是在vue.config.js增加如下配置即可 devServer: {client: {overlay: false,errors:true},}, 错误信息也不想…
阅读更多...
求职学习day8

求职学习day8

7/21回顾&#xff1a; 用面试鸭的意义可能就在于将知识点用问答的形式具象化在脑海&#xff0c;不然可能只停留在听说过的感觉 7.21 玩了一天。一个很不好的信号。今天下午要试试把 mall 项目的代码运行过一遍。 项目运行问题&#xff1a; 问题 1 &#xff1a;两个门服务器…
阅读更多...
Modbus转BACnet/IP网关的技术实现与应用

Modbus转BACnet/IP网关的技术实现与应用

引言 随着智能建筑和工业自动化的快速发展&#xff0c;不同通信协议之间的数据交换也变得日益重要。Modbus和BACnet/IP是两种广泛应用于自动化领域的通信协议&#xff0c;Modbus以其简单性和灵活性被广泛用于工业自动化&#xff0c;而BACnet/IP则在楼宇自动化系统中占据主导地…
阅读更多...
昇思25天学习打卡营第18天| DCGAN生成漫画头像

昇思25天学习打卡营第18天| DCGAN生成漫画头像

DCGAN&#xff0c;全称深度卷积对抗生成网络&#xff08;Deep Convolutional Generative Adversarial Networks&#xff09;&#xff0c;是一种通过对抗训练生成图像的技术。它在判别器和生成器中都使用了卷积和转置卷积层。 训练分为两个部分&#xff1a;训练判别器和训练生成…
阅读更多...
在spyder中使用arcgis pro的包

在spyder中使用arcgis pro的包

历时2天终于搞定了 目标&#xff1a;在anconda中新建一个arcpyPro环境&#xff0c;配置arcgispro3.0中的arcpy 一、安装arcgispro3.0 如果安装完之后打开arcgispro3.0闪退&#xff0c;就去修改注册表&#xff08;在另一台电脑安装arcgispro遇到过&#xff09; 安装成功后可…
阅读更多...
【影刀】自动化办公介绍与RPA机器人实例

【影刀】自动化办公介绍与RPA机器人实例

影刀介绍 影刀RPA是杭州分叉智能科技有限公司开发的一款自动化办公软件。 它是基于Machine Behavior Learning(机器行为学习)技术&#xff0c;为各行业提供行为自动化办公机器人。 影刀能做什么&#xff1f; 有逻辑、规则的工作都能完成操作。 影刀RPA可以在任何应用程式上…
阅读更多...
K8S 上部署 Prometheus + Grafana

K8S 上部署 Prometheus + Grafana

文章目录 一、使用 Helm 安装 Prometheus1. 配置源2. 下载 prometheus 包3. 安装 prometheus4. 卸载 二、使用 Helm 安装 Grafana1. 配置源2. 安装 grafana3. 访问4. 卸载 一、使用 Helm 安装 Prometheus 1. 配置源 地址&#xff1a;https://artifacthub.io/packages/helm/pro…
阅读更多...
Nginx 如何实现请求的缓存过期策略？

Nginx 如何实现请求的缓存过期策略？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; 文章目录 Nginx 如何实现请求的缓存过期策略&#xff1f;一、缓存的重要性与基本概念二、Nginx 缓存过期策略的原理三、设置 Nginx 缓存过期时间四、基于变量的动态缓存过…
阅读更多...
rv1126利用rkmedia、opencv、rockx……完成人脸识别

rv1126利用rkmedia、opencv、rockx……完成人脸识别

一、总体框架 视频采集、处理使用rkmedia&#xff1a;vi模块进行视频输入、rga模块进行视频处理 人脸识别&#xff1a;先获取rga输出码流&#xff0c;再调用rkmedia的模型对人脸进行推理&#xff08;线程1&#xff09; 打框框&#xff1a;opencv&#xff08;线程2&#xff0…
阅读更多...
go-kratos 学习笔记(2) 创建api

go-kratos 学习笔记(2) 创建api

proto 声明SayHi 先删除go.mod 从新初始化一下 go mod init xgs_kratosgo mod tidy 编辑 api/helloword/v1/greeter.proto 新声明一个方法 rpc SayHi (HelloHiRequest) returns (HelloHiReply) {option (google.api.http) {post: "/hi"body: "*"};} …
阅读更多...
Leetcode之string

Leetcode之string

目录 前言1. 字符串相加2. 仅仅反转字母3. 字符串中的第一个唯一字符4. 字符串最后一个单词的长度5. 验证回文串6. 反转字符串Ⅱ7. 反转字符串的单词Ⅲ8. 字符串相乘9. 打印日期 前言 本篇整理了一些关于string类题目的练习, 希望能够学以巩固. 博客主页: 酷酷学!!! 点击关注…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023