小程序图片和视频轮播

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


相关推荐

  • #利用DialogResult属性实现主程序的打开当前窗口的关闭

    #利用DialogResult属性实现主程序的打开当前窗口的关闭利用DialogResult属性实现主程序的打开当前窗口的关闭首先介绍一下非模式化窗体show()和模式化窗体showdialog()的概念:两种方法都能打开显示窗体,1.非模式化窗体show()建立新窗口后仍能对原窗口进行操作,比如点击frm窗口上的“登录”按钮,会弹出FrmMain窗口,弹出后仍能对原窗口frm进行操作(移动,点击登录按钮等操作)2.模式化窗体showdialog()建…

    2022年6月22日
    27
  • 用websocket实现实时聊天功能

    用websocket实现实时聊天功能最近想实现网页版的仿QQ聊天工具,本来想用ajax实现的,但是一想到要一直轮询,就感觉有点蠢。后来在网上找到了websocket相关的资料,就拿来跟大家分享下(不是很熟练,现在只实现了群聊,单聊的前端不会写了。但可以跟大家说说思路)。服务器端代码:首先要创建类WebSocketConfig实现ServerApplicationConfig接口,ServerApplicationConfig项目…

    2022年10月21日
    4
  • adventureworksdw2008r2_数据库表例子

    adventureworksdw2008r2_数据库表例子从观望

    2025年10月30日
    3
  • XAMPP安装Windows10

    XAMPP安装Windows10下载XAMPPhttps://sourceforge.net/projects/xampp/files/我下载的是XAMPP7.4.3之后直接双击安装,尽量不要装在C盘,一直点下一步就好了安装完成后会有这样的界面(XAMPP控制面板窗口)(Apache和MySQL之前有写安装教程)点击“Apache”的“Config”键选择“Apache(httpd.conf)”,打开配置文件找…

    2022年7月15日
    16
  • IOS开发之——Position和AnchorPoint(92)「建议收藏」

    IOS开发之——Position和AnchorPoint(92)「建议收藏」一概述CAlayer中position和anchorPoint属性说明position和anchorPoint示意图二position和anchorPoint属性说明CALayer中有2个非常重要的属性:position和anchorPoint@propertyCGPointposition用来设置CALayer在父层中的位置以父层的左上角为原点(0,0)@propertyCGPointanchorPoint称为“定位点”,“锚点”决定着CALayer身上的哪个点

    2022年10月8日
    3
  • bigtable是什么_BigTable

    bigtable是什么_BigTableBigtable是一个用来管理结构化数据的分布式存储系统,具有很好的伸缩性,能够在几千台应用服务器上处理PB数量级数据。谷歌有许多项目都把数据存储在Bigtable中,包括webindexing,G

    2022年8月3日
    5

发表回复

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

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