从零开始开发微信小程序轮播图(五)

小云云
Lepaskan: 2018-03-21 09:52:24
asal
2563 orang telah melayarinya

Swiper是滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。是目前应用较广泛的移动端网页触摸内容滑动插件。

实例:


更多样式,可以查看官方的API
参考链接:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

第一步:WXML文件:

<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
  <swiper-item>
   <image src="{{item}}" class="slide-image"/>
  </swiper-item>
 </block></swiper>
Salin selepas log masuk

第二步:js文件:

Page({  data: {
    imgUrls: [      &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,      &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,      &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
 
  },
})
Salin selepas log masuk

介绍一下参数的意思:

   indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
Salin selepas log masuk

indicator-dots  Boolean     false   是

否显示面板指示点
autoplay    Boolean     false   是否自动切换
interval    Number  5000    自动切换时间间隔
duration    Number  500     滑动动画时长

Atas ialah kandungan terperinci 从零开始开发微信小程序轮播图(五). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan