微信小程序 swiper組件構(gòu)建輪播圖的實(shí)例
更新時(shí)間：2017年09月20日 15:33:29 投稿：lqh
這篇文章主要介紹了微信小程序 swiper組件構(gòu)建輪播圖的實(shí)例的相關(guān)資料,如有疑問請留言或者到本站社區(qū)交流討論，需要的朋友可以參考下
微信小程序 swiper組件構(gòu)建輪播圖的實(shí)例
實(shí)現(xiàn)效果圖：
wxml基礎(chǔ)文件：
<view class="classname">
<swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red">
<swiper-item><image src="/images/1.jpg"></image></swiper-item>
<swiper-item><image src="/images/2.jpg"></image></swiper-item>
<swiper-item><image src="/images/3.jpg"></image></swiper-item>
</swiper>
</view>
swiper-item僅可放置在組件中，寬高自動(dòng)設(shè)置為100%。 參數(shù)設(shè)置： autoplay 自動(dòng)播放導(dǎo)致swiper變化； touch 用戶劃動(dòng)引起swiper變化； indicator-dots true是否顯示面板指示點(diǎn)圓圈； interval 自動(dòng)切換時(shí)間間隔； duration 滑動(dòng)動(dòng)畫時(shí)長; 更多設(shè)置可以看官方文檔組件！
wxss樣式文件
swiper{
width:100%;
height:500rpx;
}
swiper image{
width:100%;
height:500rpx;
}
app.json文件入口
{
"pages": [
"pages/redirect/redirect"
],
"window": {
"navigationBarBackgroundColor": "#405f80"
}
}
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
競態(tài)條件Race condition及如何避免的三種方案詳解
這篇文章主要為大家介紹了競態(tài)條件Race condition及如何避免的三種方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要為大家介紹了javascript字符串單個(gè)字符訪問方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
JavaScript使用JSON.stringify()方法帶參及不帶參示例詳解
這篇文章主要介紹了JavaScript使用JSON.stringify()方法帶參及不帶參示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了微信小程序 for 循環(huán)詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了 微信小程序點(diǎn)擊控件修改樣式實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
微信小程序 兩種滑動(dòng)方式（橫向滑動(dòng)，豎向滑動(dòng)）詳細(xì)及實(shí)例代碼
這篇文章主要介紹了微信小程序 兩種滑動(dòng)方式詳細(xì)及實(shí)例代碼的相關(guān)資料,這里對橫向滑動(dòng)和豎向滑動(dòng)都做介紹，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序（二）Window 配置詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
ECharts框架Sunburst拖拽功能實(shí)現(xiàn)方案詳解
這篇文章主要為大家介紹了ECharts框架Sunburst拖拽功能實(shí)現(xiàn)方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
制作特殊字的腳本...2006-06-06
如果你學(xué)過面向?qū)ο缶幊蹋悄憧隙ㄖ栏墒裁从玫?，如果你沒有學(xué)過，那么暫時(shí)可以不用看這篇文章,this既不指向函數(shù)自身,也不指函數(shù)的詞法作用域，具體怎么使用JS中的this,JS中的this綁定規(guī)則又是什么？2020-02-02