微信小程式swiper旋轉木馬

W_Eleven發表於2019-03-16
微信小程式

wx.html

<!--index.wxml-->
<swiper class='swiperClass'  interval="2000" duration="1000" previous-margin="30px"   next-margin="30px" circular bindchange="bindchange"   style='height: 1000rpx'>  
    <block wx:for="{{imgUrls}}" wx:key="{{index}}">    
        <swiper-item>      
            <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'> 
             </image>    
        </swiper-item>  
    </block> 
</swiper>複製程式碼

複製程式碼

wx.css

page{  
    position: relative;  
    height: 1334rpx;
}
.swiperClass {
  margin: 0;
  margin-top: 10px;
} 
.slide-image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
} 
image.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
} 
image.quiet {
  transform: scale(0.8333333);
  transition: all 0.2s ease-in 0s;
}複製程式碼

wx.js

Page({  
/**   * 頁面的初始資料   */ 
 //.js  
data: { 
   chooseSize: false,
   animationData: {},
   touchS: [0, 0],
   touchE: [0, 0],
   imgUrls: [
      "../../image/banner1.png",
      "../../image/banner2.png", 
     "../../image/banner3.png"
     ], 
   swiperIndex: 0 //這裡不寫第一次啟動展示的時候會有問題  
}, 
 bindchange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })  }, 
 /**   * 生命週期函式--監聽頁面載入   */  
onLoad: function (options) { 
 },  
/**   * 生命週期函式--監聽頁面初次渲染完成   */ 
onReady: function () { 
 },  
/**   * 生命週期函式--監聽頁面顯示   */  
onShow: function () { 
 },  
/**   * 生命週期函式--監聽頁面隱藏   */  
onHide: function () { 
 },  
/**   * 生命週期函式--監聽頁面解除安裝   */ 
onUnload: function () { 
 }, 
/**   * 頁面相關事件處理函式--監聽使用者下拉動作   */  
onPullDownRefresh: function () { 
 },  
/**   * 頁面上拉觸底事件的處理函式   */  
onReachBottom: function () { 
 },  
/**   * 使用者點選右上角分享   */  
onShareAppMessage: function () { 
 }})複製程式碼


相關文章