微信小程序 swiper組件構(gòu)建輪播圖的實例
更新時間：2017年09月20日 15:33:29 投稿：lqh
這篇文章主要介紹了微信小程序 swiper組件構(gòu)建輪播圖的實例的相關(guān)資料,如有疑問請留言或者到本站社區(qū)交流討論，需要的朋友可以參考下
微信小程序 swiper組件構(gòu)建輪播圖的實例
實現(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僅可放置在組件中，寬高自動設(shè)置為100%。 參數(shù)設(shè)置： autoplay 自動播放導(dǎo)致swiper變化； touch 用戶劃動引起swiper變化； indicator-dots true是否顯示面板指示點圓圈； interval 自動切換時間間隔； duration 滑動動畫時長; 更多設(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及如何避免的三種方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要為大家介紹了javascript字符串單個字符訪問方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
JavaScript使用JSON.stringify()方法帶參及不帶參示例詳解
這篇文章主要介紹了JavaScript使用JSON.stringify()方法帶參及不帶參示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了微信小程序 for 循環(huán)詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了 微信小程序點擊控件修改樣式實例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
微信小程序 兩種滑動方式（橫向滑動，豎向滑動）詳細及實例代碼
這篇文章主要介紹了微信小程序 兩種滑動方式詳細及實例代碼的相關(guān)資料,這里對橫向滑動和豎向滑動都做介紹，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序（二）Window 配置詳細介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
ECharts框架Sunburst拖拽功能實現(xiàn)方案詳解
這篇文章主要為大家介紹了ECharts框架Sunburst拖拽功能實現(xiàn)方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
制作特殊字的腳本...2006-06-06
如果你學過面向?qū)ο缶幊?，那你肯定知道干什么用的，如果你沒有學過，那么暫時可以不用看這篇文章,this既不指向函數(shù)自身,也不指函數(shù)的詞法作用域，具體怎么使用JS中的this,JS中的this綁定規(guī)則又是什么？2020-02-02