小程序图片和视频轮播

小程序图片和视频轮播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%;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • HDFS命令详解[通俗易懂]

    HDFS命令详解[通俗易懂]hdfs命令:ls格式:hdfsdfs-lspath作用:类似于linux的ls命令,显示文件列表hdfsdfs-ls/lsr格式:hdfsdfs-lsrpath作用:在整个目录下递归执行ls,与lunix中的ls-R类似hdfsdfs-lsr/mkdir格式:hdfsdfs[-p]-mkdirpath作用:创建目录,-p表示可以递归创…

  • oracle 主键删除,联合主键的创建

    oracle 主键删除,联合主键的创建

  • Navicat15 注册激活码【最新永久激活】「建议收藏」

    (Navicat15 注册激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • pycharm如何使用mysql_pycharm中的MySQL驱动

    pycharm如何使用mysql_pycharm中的MySQL驱动一般的开发过程中,我们需要使用pycharm来连接数据库,从而来进行对数据库的操作,这里主要连接的是mysql数据库,另外加了使用pandas模块读取数据库的操作,基本的操作如下所示:直接连接数据库importpymysqlconn=pymysql.connect(host=’localhost’,port=3306,db=’joker’,user=’root’,password=’root…

  • oracle修改表名称索引丢失,修改表名索引约束触发器等对象不会失效[通俗易懂]

    oracle修改表名称索引丢失,修改表名索引约束触发器等对象不会失效[通俗易懂]修改表名后,索引、约束、触发器、comment、授权不会失效,这些对象的创建脚本中的表名会正常自动更改修改表名前,索引脚本如下CREATEINDEXCUX.CUX_MSC_RMP_SDCI_DTLS_N2170307ONCUX.CUX_MSC_RMP_SDCI_DTLS(LINE_ID)修改表名后,索引脚本如下CREATEINDEXCUX.CUX_MSC_RMP_SDCI_DTLS_N…

  • ViewStub的使用

    ViewStub的使用ViewStub经常用在ListView中,用来隐藏一些操作,使用起来也很简单,主要就是在ListView的Item中通过一个ViewStub来引用被隐藏的布局文件。监听用户点击Item,判断下当前是可见还是不可见,实时进行状态的转换即可。效果图如下:   下面看代码:MainActivity.java:设置数据源 publicclassMainActiv…

发表回复

您的电子邮箱地址不会被公开。

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