微信小程序開發(fā)之滑塊視圖容器(swiper)詳解及實(shí)例代碼

更新時(shí)間：2017年02月22日 10:13:53 作者：何東_hd

這篇文章主要介紹了微信小程序開發(fā)之滑塊視圖容器(swiper)詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

微信小程序開發(fā)之滑塊視圖容器詳解

實(shí)現(xiàn)效果圖：

這里寫圖片描述

實(shí)現(xiàn)起來特別簡單，看看代碼是怎么寫的呢：

<swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:for-index="index">
  <swiper-item>
   <image src="{{item}}" class="side-img"></image>
  </swiper-item>
 </block>
</swiper>

這就是布局了，看一下js里面代碼：

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],
    indcatorDots: true,
    autoPlay: true,
    interval: 5000,
    duration: 500
  },

，swiper有以下一些常用屬性：

這里寫圖片描述

標(biāo)記的兩個(gè)屬性暫時(shí)不管。

注意：其中只可放置組件，否則會導(dǎo)致未定義的行為。

swiper-item

僅可放置在組件中，寬高自動設(shè)置為100%。

就是這樣，自己動手試試。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序圖片寬100%顯示并且不變形
這篇文章主要介紹了微信小程序圖片寬100%顯示并且不變形的相關(guān)資料,需要的朋友可以參考下
2017-06-06
Web Worker線程解決方案electron踩坑記錄
這篇文章主要為大家介紹了Web Worker線程解決方案electron踩坑記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
Array.reduce使用原理示例詳解
這篇文章主要為大家介紹了Array.reduce使用原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
微信小程序前端源碼邏輯和工作流詳解
這篇文章主要介紹了微信小程序前端源碼邏輯和工作流詳解的相關(guān)資料,需要的朋友可以參考下
2016-10-10
Vuex的API文檔說明詳解
本文將詳細(xì)介紹Vuex的API文檔,需要的朋友可以參考下
2020-02-02
WebAssembly使用方法研究
這篇文章主要為大家介紹了WebAssembly使用方法研究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
微信小程序檢查接口狀態(tài)實(shí)例詳解
這篇文章主要介紹了微信小程序檢查接口狀態(tài)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-06-06
JS的深淺復(fù)制詳細(xì)
這篇文章主要介紹JS的深淺復(fù)制，之所以會出現(xiàn)深淺拷貝的問題，實(shí)質(zhì)上是由于JS對基本類型和引用類型的處理不同。下面感興趣的小伙伴請跟小編一起來學(xué)習(xí)吧
2021-10-10
國慶節(jié)到了,利用JS實(shí)現(xiàn)一個(gè)生成國慶風(fēng)頭像的小工具詳解實(shí)現(xiàn)過程
明天就是國慶節(jié)了，最近看到好多好友換了國慶風(fēng)的頭像，感覺這個(gè)挺有意思，就找到了類似的源碼研究了一番，并進(jìn)行了改造（并非原創(chuàng)，只是進(jìn)行了改造，只要想分享一下實(shí)現(xiàn)思路）。下面就來看看如何實(shí)現(xiàn)一鍵生成國慶風(fēng)頭像小工具。
2021-09-09
微信小程序獲取設(shè)備信息 API實(shí)例詳解
這篇文章主要介紹了微信小程序獲取設(shè)備信息 API實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2016-10-10