微信小程式自定義swiper
滑塊視圖容器，其中只可放置swiper-item組件，否則會導致未定義的行為，
先在index.wxml中寫
style=“background:{{item}}” 報錯不要管，不影響頁面布局
<view class="container">
<swiper class="swiper1"
indicator-dots="{{indicatorDots}}" 是否顯示面板指示點
autoplay="{{autoplay}}" 是否自動切換
interval="{{interval}}" 自動切換時間間隔
duration="{{duration}}" 滑動影片時長
circular="{{circular}}" 是否采用銜接滑動
indicator-active-color="#ff0099" 選中指示點顏色
>
<block wx:for="{{background}}" wx:key="index"> 回圈遍歷資料
<swiper-item>
<view class="swiper-item" style="background:{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
再在index.js中寫
Page({
data: {
background: ["red", "pink","yellowgreen"],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500,
circular:true
}
})
最后在index.wxss中寫
.swiper1{
width: 100%;
height: 200px;
}
.swiper-item{
width: 100%;
height: 100%;
}
記住：
- 圖片跟背景顏色思路一樣
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229211.html
標籤：其他
上一篇：HTML5+css+JS實作LOL官網動態頁面DW頁眉加輪播圖
下一篇：原生JS拖拽