登录  /  注册

微信小程序轻松上手之用swiper实现图片轮番效果

高洛峰
发布: 2017-02-28 11:03:46
原创
2743人浏览过

上一篇我们通过配置小程序的wxss在容器组件view实现水平和纵向布局,本篇用swiper标签实现图片轮番效果。


轮番效果在很多的网站主页或者手机应用端都能看到,在微信小程序中使用swiper组件来实现图片轮番,今天的小例子效果如下:

微信小程序轻松上手之用swiper实现图片轮番效果

为了方便演示我将动画切换的间隔调整为3s,现实项目中一般为5s,具体看项目需求而定。

实现图片轮番使用swiper滑块视图容器组件,页面结构文件代码如下:

<!--mySwiper.wxml-->  
<view class="container">  
    <swiper indicator-dots="{{indicatorDots}}"  
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
        <block wx:for="{{imgUrls}}">  
            <swiper-item>  
               <image src="{{item}}" class="slide-image" width="355" height="150"/>  
            </swiper-item>  
        </block>  
    </swiper>  
</view>
登录后复制

忽略最外层的父容器view和组件属性,页面文件结构简化如下:

<swiper>  
        <block wx:for="{{imgUrls}}">  
            <swiper-item>  
                <image/>  
            </swiper-item>  
        </block>  
</swiper>
登录后复制

以上代码看出,整个轮番图的代码是有一个swiper组件,包含着多个swiper-item组件形成的,其中swiper-item中放置的是image。

的作用是控制属性绑定一个imgUrls数组,使用数组中各项的数据重复渲染该组件。block标签并不会在页面中渲染,如需了解更多可进入官方文档:

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=201715 中了解更多关于 block wx:for 的内容。

代码中看到 的 {{}} 符号是Mustache 语法,意思是将双大括号中的变量名中的数据取出,实现数据绑定,这些变量在同名文件的.js文件中data对象中声明,如下:

// mySwiper.js  
Page({  
  data:{  
     imgUrls: [  
      &#39;/asserts/img/001.jpg&#39;,  
      &#39;/asserts/img/002.jpg&#39;,  
      &#39;/asserts/img/003.jpg&#39;  
    ],  
    indicatorDots: true,  
    autoplay: true,  
    interval: 3000,  
    duration: 1000  
  },  
  onLoad:function(options){  
    // 生命周期函数--监听页面加载  
     
  }  
}
登录后复制

其中,

indicator-dots: 是否显示面板指示点,默认为false;

autoplay:是否自动切换,默认为false;

interval:自动切换时间间隔,默认5000ms;

duration: 滑动动画时长,默认为1000ms;

需要注意的是swiper组件需要给他一个宽度,不然swiper不显示,这里给了一个具体的宽高,并设置居中显示:

/* pages/mySwiper/mySwiper.wxss */  
swiper{  
    margin: 0 auto;  
    height: 200px;  
    width: 300px;  
}
登录后复制

详细swiper属性说明如下:

微信小程序轻松上手之用swiper实现图片轮番效果

更多微信小程序轻松上手之用swiper实现图片轮番效果相关文章请关注PHP中文网!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号