小程序图片和视频轮播

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


相关推荐

  • 深入了解MyBatis二级缓存

    深入了解MyBatis二级缓存MyBatis深入了解二级缓存

    2025年8月23日
    3
  • java分布式学习路线

    java分布式学习路线先理解为什么需要分布式,因为服务器处理的能力需要提升,这里有两个方面,第一是纵向也就是增加cpu的能力,或者加内存;另一个方向就是横向,就是分布式。将本来一台计算机的压力分给多太计算机,从而可以平均分布io,同时提升响应速度。建议先从分布式数据库看起,之后你可以用虚拟机,和本机进行测试分布式数据库。之后你可以使用java操作这种分布式数据库。从而依旧用虚拟机练习web项目…

    2022年6月6日
    98
  • 怎么删除pycharm的项目_怎样删除pycharm创建的项目

    怎么删除pycharm的项目_怎样删除pycharm创建的项目前言os模块和shutil模块是Python处理文件/目录的主要方式。os模块提供了一种使用操作系统相关功能的便捷方式,shutil模块是一种高级的文件/目录操作工具。文件的处理os模块提供了一些便捷功能来使用操作系统资源,比如读取资源目录下的文件、在命令行查看某路径下文件的所有内容等。获取系统类型对代码进行兼容性开发以适应不同操作系统时通过操作系统类型进行判断就可以轻松解决。importosimportsysprint(os.name)#返回nt代表Windows,posix代表L

    2022年8月25日
    5
  • Java获取当前时间年月日_JS得出当前年月日时间的代码

    Java获取当前时间年月日_JS得出当前年月日时间的代码packagecom.ob;importjava.text.ParseException;importjava.text.SimpleDateFormat;importjava.util.Calendar;importjava.util.Date;publicclassDateTest{ publicstaticvoidmain(String[]args)

    2025年7月23日
    1
  • 遍历ArrayList并移除一个元素[通俗易懂]

    遍历ArrayList并移除一个元素[通俗易懂]前言这是一个比较经典的面试题,相信也会有不少人遇到,今天就在此记录一下,写了两种方式供大家参考。方式一在for循环中删除元素,倒序遍历ArrayList能够有效防止漏删,这里大家可能会有疑问了?假设按照从0到size-1下标来删那么如果有相邻的两个元素是一样的,删除了第一个,此时数组长度会-1并且所有元素往前移动一位,那么第二个就移动到第一个元素的位置了,此时控值for循环的下标i已经+1了等于直接就跳过了第二个重复元素,倒叙就不会出现此类情况了。List<String>strs=

    2022年7月22日
    8
  • 免费申请国外免费域名超详细教程

    免费申请国外免费域名超详细教程1.首先申请免费域名网站:https://my.freenom.com/domains.php2.填入域名,这里我们以xcflag为列(尽量选择复杂一点的或者五个字母以上的域名,因为简单的有些域名是需要收费的),点击检查可用性。3.可以看到很多免费的域名(用的谷歌翻译插件,翻译有时候不是很准确,free翻译过来应该是免费而不是自由,之后会写一些关于谷歌插件的笔记,详细讲解)4.我们选择xcflag.tk点击立即获取,稍等一会点击购物车查看绿色按钮5.默认三个月试用,这里下拉框我们选择十二个月

    2022年6月30日
    64

发表回复

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

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