小程序图片和视频轮播

小程序图片和视频轮播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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • QStringList用法总结

    QStringList用法总结QStringList继承自QList,提供了一个QString的List;同QList一样,QStringList也是隐式数据共享的,并且支持按索引访问及快速插入、删除元素的操作。所有QList支持的操作都可用于QStringList,同时QStringList在此基础上提供了一些便于操作QString的功能。1.QStringList的构造函数及析构函数构造函数:a.QSt

    2022年5月26日
    253
  • 阿里云服务器怎么开放端口_云服务器开启端口

    阿里云服务器怎么开放端口_云服务器开启端口阿里云服务器如何开放端口,这里我将开放8082端口,我们来看下吧方法/步骤 登录阿里云服务器并进入控制台,点击【云服务器ECS】。 在【云服务器ECS】点击【实例】并跳转到实例列表。 在实例列表找到要开放端口的云服务器实例。并点击后面的【更多】–》【网络和安全组】–》【安全组配置】。 在【本实例安全组】内点击【配置规则】打开【安全组规则】。这里有出\入的方向,这里我开放的是8082端口,属于入方向的。在这里可以新增规则,这里为了方便直接对已有的规

    2022年10月2日
    3
  • [灵魂拷问]MySQL面试高频100问(工程师方向)

    [灵魂拷问]MySQL面试高频100问(工程师方向)黑客技术点击右侧关注,了解黑客的世界!Java开发进阶点击右侧关注,掌握进阶之路!Python开发点击右侧关注,探讨技术话题!作者丨呼延十排版丨Java团长juejin….

    2025年12月12日
    4
  • splice方法最详细最全面的解释!!!

    splice方法最详细最全面的解释!!!文章目录前言一、splice方法官方文档节选二、根据文档测试方法一:方法二:方法三:方法四:总结前言在学前端的时候一直对splice方法不太清楚,今天特意总结了一下!一、splice方法官方文档节选查阅了splice方法的示例文档,如下:(不想看论述的,可以直接跳到下面看总结!)splice返回值:Array所属对象:ArrayTheelementstoaddtothearray.Ifyoudon’tspecifyanyelements,splice

    2022年9月24日
    4
  • 如何查看redis占用内存大小

    如何查看redis占用内存大小

    2021年11月3日
    44
  • java 反编译器_Java反编译工具

    java 反编译器_Java反编译工具xjad反编译工具下载使用反编译时把class文件直接拖拽至工具内即可,如果反编译结果不对时把class文件重新去拿原始的不要编辑打开,或者放在一个文件夹内在试。反编译后的代码没有注释、注解等,反正能用得细心看看调整。点击下载工具http://a.xzfile.com/down2/XJadfanbinayi_downcc.zip…

    2022年8月19日
    6

发表回复

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

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