返回

提供微商城·微分销·小程序开店需求

5分钟开通你的微信商城店铺!
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

小程序swiper组件实现点击图片切换的效果

2020-09-27 作者:黄珊

  小程序swiper组件实现点击图片轮播切换的效果,还是比较简单的。

  比如:

小程序swiper组件实现点击图片切换的效果

  1.index.wxml

<!--index.wxml-->  
    <swiper class="swiper" indicator-dots="true" autoplay="true" 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>  

  这里有几个属性需要说明.

小程序swiper组件实现点击图片切换的效果

  微信小程序开发的循环用到了

  我这里是遍历movies[]数组.就是item

  2.index.js

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    movies:[  
    {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,  
    {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,  
    {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,  
    {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}   
    ]  
  },  
  onLoad: function () {  
  }  
})  

  3.WXML

  /**index.wxss**/

  .swiper {

  height: 400rpx;

  width: 100%;

  }

  .swiper image {

  height: 100%;

  width: 100%;

  }

HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。

更多小程序开发案例,尽在:http://www.hishop.com.cn/xiaocx/kaifa.html

 

推荐文章

小程序开店 社区团购 门店开店 免费注册