小程序图片和视频轮播

小程序图片和视频轮播index.wxml<swiperclass=”swiper”indicator-dots=”true”autoplay=”{{flag}}”interval=”5000″duration=”1000″><blockwx:for=”{{movies}}”wx:for-index=”index”>&…

大家好,又见面了,我是你们的朋友全栈君。

index.wxml

<swiper class="swiper" indicator-dots="true" autoplay="{
  
  {flag}}"       interval="5000" duration="1000">    
       <block wx:for="{
  
  {movies}}" wx:for-index="index">    
        <swiper-item>    
          <image src="{
  
  {item.url}}" class="slide-image" mode="aspectFill"/>    
        </swiper-item>    
      </block>   
      <swiper-item>  
        <video id="myVideo" src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400' bindtap="bofang" controls='true'></video>
      </swiper-item>     

index.js

Page({
  data: {
    movies: [
      { url: 'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg' },
      { url: 'file://192.168.203.1/%E5%85%B1%E4%BA%AB/Chrysanthemum.jpg' },
      { url: 'http://192.168.203.1/Chrysanthemum.jpg' }
    ]
  }

index.wxss

.swiper {
  height: 400rpx;
  width: 100%;
}
.swiper image {
  height: 100%;
  width: 100%;
}
.swiper video {
  height: 100%;
  width: 100%;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/143567.html原文链接:https://javaforall.net

(0)
上一篇 2022年5月21日 下午12:00
下一篇 2022年5月21日 下午12:00


相关推荐

  • Nano-Banana小白教程:如何快速生成说明书风格设计图

    Nano-Banana小白教程:如何快速生成说明书风格设计图

    2026年3月13日
    1
  • 🚀 通过 DeepSeek 3.1 配置 Claude Code 教程

    🚀 通过 DeepSeek 3.1 配置 Claude Code 教程

    2026年3月16日
    2
  • RuntimeException和非RuntimeException的区别「建议收藏」

    RuntimeException和非RuntimeException的区别「建议收藏」通俗一点:   Error:系统级别的错误,如栈溢出内存溢出之类 ,此类错误一般情概况保证程序能安全退出即可   Exception:分为RuntimeException 和 非RuntimeException                                                                           …

    2022年7月18日
    18
  • 视频直播基础技术总结1

    视频直播基础技术总结1-视频直播基础技术总结11.视频直播**视频直播的5个关键的流程:录制->编码->网络传输->解码->播放视频直播平台一般包括推流端,后台系统和客户端。通常包括直播内容采集、直播后台系统和直播内容播放三个模块。1)内容采集:采集的方式有很多,从一般几十块PC摄像头到几十万的专业录制编码设备,还有移动端的手机前后置摄像头;分布式推

    2022年7月24日
    8
  • MPP架构是什么?看这一篇就行了。。

    MPP架构是什么?看这一篇就行了。。文章目录 MPP 是什么 SMP SymmetricMul Processor 对称多处理器结构 NUMA Non UniformMemor 非一致存储访问结构 MPP Massive ParallelProc 海量并行处理架构 MPPDB 学习笔记 大数据架构详解 从数据获取到深度学习 MPP 是什么系统架构层面的服务器分类 如下三类 SMP Sym

    2026年3月18日
    2
  • pycharm conda 虚拟环境_yum源配置本地镜像

    pycharm conda 虚拟环境_yum源配置本地镜像开始使用Pycharm,搭配Conda做包管理,按照网上教程使用过程中发现镜像源不管是阿里的还是清华的都会有404异常,花了点时间找到正确的配置方式。记录一下备忘。参考链接:https://blog.csdn.net/weixin_42425256/article/details/105099769https://blog.csdn.net/weixin_39918690/article/details/110606097https://www.cnblogs.com/tianlang25/.

    2022年8月27日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号