18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

微信小程序店铺_微信小程序swiper组件用法实例分

2021-01-11分享 "> 对不起,没有下一图集了!">
微信小程序swiper组件用法实例分析【附源码下载】       这篇文章主要介绍了微信小程序swiper组件用法,结合实例形式分析了微信小程序中swiper组件的功能、使用方法,并附带完整源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了微信小程序swiper组件用法。分享给大家供大家参考,具体如下:

关于视图容器swiper的详细内容可参考

先来看看运行效果:

index.js:

Page({
 data: {
 imgUrls: ['images//tooopen_sy_6.jpg',
'images//tooopen_sy_6.jpg',
'images//tooopen_sy_5.jpg'
 indicatorDots: false,
 autoplay: false,
 interval: 5000,
 duration: 1000
 changeIndicatorDots: function (e) {
 this.setData({
 indicatorDots: !this.data.indicatorDots
 changeAutoplay: function (e) {
 this.setData({
 autoplay: !this.data.autoplay
 intervalChange: function (e) {
 this.setData({
 interval: e.detail.value
 durationChange: function (e) {
 this.setData({
 duration: e.detail.value

index.wxml:

 swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" 
 block wx:for="{{imgUrls}}" wx:key="{{index}}" 
 swiper-item 
 image src="{{item}}" width="355" height="150" /image 
 text {{index}} /text 
 /swiper-item 
 /block 
 /swiper 
 button bindtap="changeIndicatorDots" indicator-dots ({{indicatorDots}}) /button 
 button bindtap="changeAutoplay" autoplay ({{autoplay}}) /button 
 slider bindchange="intervalChange" show-value min="2000" max="5000"/ interval
 slider bindchange="durationChange" show-value min="1000" max="2000"/ duration

index.wxss:

.slide-image{ 
 display: inline;
.textindex{
 position: absolute;
 top :20px;
 color: red;

附:完整实例代码点击此处。

希望本文所述对大家微信小程序开发有所帮助。


"> 对不起,没有下一图集了!">
在线咨询