|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 上一篇我們通過配置小程序的wxss在容器組件view實現水平和縱向布局,本篇用swiper標簽實現圖片輪番效果。輪番效果在很多的網站主頁或者手機應用端都能看到,在微信小程序中使用swiper組件來實現圖片輪番,今天的小例子效果如下:
為了方便演示我將動畫切換的間隔調整為3s,現實項目中一般為5s,具體看項目需求而定。 實現圖片輪番使用swiper滑塊視圖容器組件,頁面結構文件代碼如下: <!--mySwiper.wxml-->
<view class="container">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
</view>忽略最外層的父容器view和組件屬性,頁面文件結構簡化如下: <swiper>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image/>
</swiper-item>
</block>
</swiper>以上代碼看出,整個輪番圖的代碼是有一個swiper組件,包含著多個swiper-item組件形成的,其中swiper-item中放置的是image。 的作用是控制屬性綁定一個imgUrls數組,使用數組中各項的數據重復渲染該組件。block標簽并不會在頁面中渲染,如需了解更多可進入官方文檔: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=201715 中了解更多關于 block wx:for 的內容。 代碼中看到 的 {{}} 符號是Mustache 語法,意思是將雙大括號中的變量名中的數據取出,實現數據綁定,這些變量在同名文件的.js文件中data對象中聲明,如下: // mySwiper.js
Page({
data:{
imgUrls: [
'/asserts/img/001.jpg',
'/asserts/img/002.jpg',
'/asserts/img/003.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000
},
onLoad:function(options){
// 生命周期函數--監聽頁面加載
}
}其中, indicator-dots: 是否顯示面板指示點,默認為false; autoplay:是否自動切換,默認為false; interval:自動切換時間間隔,默認5000ms; duration: 滑動動畫時長,默認為1000ms; 需要注意的是swiper組件需要給他一個寬度,不然swiper不顯示,這里給了一個具體的寬高,并設置居中顯示: /* pages/mySwiper/mySwiper.wxss */
swiper{
margin: 0 auto;
height: 200px;
width: 300px;
}詳細swiper屬性說明如下:
更多微信小程序輕松上手之用swiper實現圖片輪番效果相關文章請關注PHP中文網! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!