小程序图片和视频轮播

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


相关推荐

  • 讨论关于RAID以及RAID对于存储的影响

    讨论关于RAID以及RAID对于存储的影响

    2021年11月24日
    55
  • JVM内存模型详解(1.7与1.8的区别)[通俗易懂]

    JVM内存模型详解(1.7与1.8的区别)[通俗易懂]文章目录1.JDK、JRE、JVM关系2.JAVA程序的运行(为什么java可以跨平台)3.JVM运行时数据区1.JDK、JRE、JVM关系从图中就可以很清晰的看清他们之间的关系:JDK>JRE>JVM2.JAVA程序的运行(为什么java可以跨平台)比如我们编写一个HelloWord.java,他是如何运行的呢因为有JVM,所以我们在不同平台只需要下载对应的JDK即可…

    2022年5月16日
    47
  • 迭代器和生成器

    迭代器可迭代的数据类型查看数据类型的所有方法可迭代协议:迭代器协议和可迭代对象判断一个数据类型是否是迭代器和可迭代对象:迭代器协议的原理1#基于迭代器协议2li=[1,2,3]

    2022年3月29日
    49
  • 小白 虚拟机 kali_Linux安装 详细教程「建议收藏」

    小白 虚拟机 kali_Linux安装 详细教程「建议收藏」安装版本:VMmareworkstationprokali_Linux安装环境:Window10首先我们先了解一下什么是kali_linux:KaliLinux是基于Debian的Linux发行版,设计用于数字取证操作系统。每一季度更新一次。由OffensiveSecurityLtd维护和资助。最先由OffensiveSecurity的MatiAharoni和DevonKearns通过重写BackTrack来完成,BackTrack是他们之前写的用于取证的Linux发行

    2022年4月30日
    77
  • sql数据库嵌套查询_select嵌套查询

    sql数据库嵌套查询_select嵌套查询嵌套查询是将一个select查询放到另一个查询的where子句中去如:查询”xx“同学的所修课程及分数1.先选择姓名为”xx”的同学的学号select学号from学生where姓名=“XX”2.根据学号来选择相关字段select课程名,分数from成绩where学号=根据1,2合并select课程名,分数from成绩where学号=(select学号from…

    2022年8月10日
    9
  • python贪吃蛇最简单代码_用python写贪吃蛇

    python贪吃蛇最简单代码_用python写贪吃蛇一、前言之前版本很多小伙伴都觉得难度过高,另外也有粉丝问还能不能精简代码。所以这版降低了难度(由原来过关增加5km/h改为3.5KM/h),并通过反射代替IFELSE的写法,并删除了一些冗余的代码,将代码压缩到了71行(不必要的压缩代码是不建议的,这里压缩代码只是为了好玩)二、实现效果三、环境要求python3+pygame包安装命令:打开cmd输入:pipinstallpygame四、源码分享importpygameimportsysimportra

    2025年8月28日
    11

发表回复

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

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