小程序图片和视频轮播

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


相关推荐

  • springcloud原理详解_SpringMVC运行原理

    springcloud原理详解_SpringMVC运行原理SpringCloudEureka原理分析一、Eureka的基础架构及服务治理机制  Eureka服务治理的基础架构包含三个核心:服务注册中心、服务提供者、服务消费者。其中服务注册中心,即Eureka提供的服务端,提供服务注册和发现的功能;服务提供者,即将自己的服务注册到注册中心;服务的消费者,从注册中心获取服务列表,从而使消费者知道到何处调用服务,服务消费可以使用Ribbon、Feign等。1、服务提供者:服务注册:服务提供者在项目启动时,会通过发送REST请求的方式将自己注册到eure

    2022年10月21日
  • oracle连接出现ora-12154,与虚拟机Oracle连接出现ora-12154问题的解决方法

    oracle连接出现ora-12154,与虚拟机Oracle连接出现ora-12154问题的解决方法谈到ora-12154问题,网上有一大堆解决方法,原因基本统一:tns或listener配置不正确。对于listener配置不正确的一般较少发生,大多数人都是按照默认配置一路“下一步”过来的,基本都是orcl的服务名,如果说本地可以连通orcl,别的机子就连不通那应该跟listener关系不大。大部分都是tns配置不正确。我遇到的现象是:在本机建了一个2003的虚拟机,虚拟机里面装了oracle1…

    2022年7月19日
  • Python系列教程一Python入门(一)

    Python系列教程一Python入门(一)前言各位看博客的园友们,大家好,我就是那个风流倜傥的KK,还记得我那篇2019年的年中总结博客吗?我想有许多看博客的园友是没有读过我那篇文章的,KK很生气,后果很严重(开个玩笑了,怎么可能)。给大家

    2022年7月6日
  • gmail邮箱无法发送邮件_gmail发不出邮件怎么办

    gmail邮箱无法发送邮件_gmail发不出邮件怎么办  最近一直在做邮箱功能。刚刚发现了一个问题,记录一下。  我在我做的邮箱系统中绑定了163邮箱,然后给我的gmail邮箱发邮件,gmail没有收到邮件。这时,心里大惊,我靠,不会是我系统出bug了吧!!用QQ邮箱发一遍,gmail收到了。这时更加慌张了,心想应该是我的系统bug了。然后用163官网发一遍,嗯~~完美,没收到。这证明不是我系统的问题。  刚才百度了一下这个问题,有个回答…

    2022年9月13日
  • STVD+COSMIC编译工程时can’t open file crtsi0.sm8

    STVD+COSMIC编译工程时can’t open file crtsi0.sm8#errorclnkDebug\demo.lkf:47can’topenfilecrtsi0.sm8#errorclnkDebug\demo.lkf:60can’topenfilelibis0.sm8#errorclnkDebug\demo.lkf:61can’topenfilelibm0.sm8

    2022年9月16日
  • 光电编码器工作原理[通俗易懂]

    光电编码器工作原理[通俗易懂]光电编码器工作原理点击打开链接根据原理的不同又可分为:增量型、绝对型和混合式增量型。光电编码器的主要工作原理为光电转换,是一种通过光电转换将输出轴的机械几何位移量转换为脉冲或数字量的传感器。光电编码器主要由光栅盘和光电检测装置构成,在伺服系统中,光栅盘与电动机同轴致使电动机的旋转带动光栅盘的旋转,再经光电检测装置输出若干个脉冲信号,根据该信号的每秒脉冲数便可计算当前电动机的转速

    2022年9月26日

发表回复

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

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