商城系統(tǒng) 注冊

小程序swiper組件實現(xiàn)點擊圖片切換的效果

2020-09-27|HiShop
導(dǎo)讀：小程序swiper組件實現(xiàn)點擊圖片輪播切換的效果，還是比較簡單的。...

　　小程序swiper組件實現(xiàn)點擊圖片輪播切換的效果，還是比較簡單的。

　　比如：

小程序swiper組件實現(xiàn)點擊圖片切換的效果

　　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組件實現(xiàn)點擊圖片切換的效果

　　微信小程序開發(fā)的循環(huán)用到了

　　我這里是遍歷movies[]數(shù)組.就是item

　　2.index.js

//index.js  
//獲取應(yīng)用實例  
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步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序開發(fā)案例，盡在：http://descansotropical.com/xiaocx/kaifa.html

 
電話咨詢 預(yù)約演示 0元開店