微信小程序swiper輪播圖組件使用方法詳解
更新時間：2022年07月07日 09:16:59 作者：In Heaven
這篇文章主要為大家詳細(xì)介紹了微信小程序swiper輪播圖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序swiper輪播圖組件的使用，供大家參考，具體內(nèi)容如下
在components中新建文件夾swiper
components/swiper/swiper.wxml
<!--components/swiper/swiper.wxml-->
<view class="container">
? ? <swiper class="swiper-box" bind:change="swiperChange" interval="4000" circular autoplay>
? ? ? ? <block wx:for="{{swiperList}}" wx:key="index">
? ? ? ? ? ? <swiper-item>
? ? ? ? ? ? ? ? <image class="targetImg" src="{{item}}" mode="aspectFill"></image>
? ? ? ? ? ? </swiper-item>
? ? ? ? </block>
? ? </swiper>
? ? <!--重置小圓點的樣式 ?-->
? ? <view class="dots">
? ? ? ? <view class="dotsBox" style='width:{{(swiperList.length*26+swiperList.length*10) + "rpx"}}'>
? ? ? ? <!-- <view class="dotsBox" style='width:180rpx'> -->
? ? ? ? ? ? <block wx:for="{{swiperList}}" wx:key="index">
? ? ? ? ? ? ? ? <text class="dot {{index == currentIndex ? 'dot-active' : ''}}"></text>
? ? ? ? ? ? </block>
? ? ? ? </view>
? ? </view>
</view>components/swiper/swiper.js
Component({
? properties: {
? ? swiperList: {
? ? ? type: Array,
? ? ? value: []// 默認(rèn)數(shù)據(jù)（可以從引用組件處的屬性傳入該屬性值）
? ? }
? },
? data: {
? ? currentIndex: 0 ?// 初始高亮下標(biāo)
? },
? methods: {
? ? /* 這里實現(xiàn)控制自定義輪播指示點高亮 */
? ? swiperChange(e) { ? ??
? ? ? this.setData({
? ? ? ? currentIndex: e.detail.current
? ? ? }) ? ? ?
? ? }
? }
})components/swiper/swiper.wxss
/* components/swiper/swiper.wxss */
.container {
? position: relative;
}
.swiper-box {
? width: 100%;
? height: 364rpx;
}
.targetImg {
? width: 100%;
? height: 100%;
}
/*小圓點 ?*/
.dots {
? width: 100%;
? height: 4rpx;
? display: flex;
? position: absolute;
? bottom: 30rpx;
}
.dotsBox {
? height: 4rpx;
? display: flex;
? margin: 0 auto;
}
/*未選中時的小圓點樣式 */
.dot {
? width: 26rpx;
? height: 4rpx;
? border-radius: 2rpx;
? margin-right: 10rpx;
? background-color: #ffffff;
? opacity: 0.4;
}
/*選中以后的小圓點樣式 ?*/
.dot-active {
? opacity: 1;
}在pages文件中引用
json文件中
{
? "usingComponents": {
? ? "w-swiper":"/components/swiper/swiper"
? }
}html文件中
<w-swiper swiperList="{{sprList}}" />js文件中
data:{
? ? sprList:['/images/img.png','/images/img.png'],
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了送你43道JS面試題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
js操作時間（年-月-日 時-分-秒 星期幾）,需要的朋友可以參考下。2010-06-06
本文將要介紹在JavaScript 6(ES6)里出現(xiàn)的一個關(guān)于字符串操作的語法特征，有需要的朋友們可以參考學(xué)習(xí)，下面來一起來看看吧。2016-09-09
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)手動點贊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04
下面小編就為大家?guī)硪黄獪\談JS之tagNaem和nodeName。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
Email地址加密javascript版...2006-08-08
下面小編就為大家分享兩段簡單的JS代碼防止SQL注入。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
JS實現(xiàn)圖片點擊后出現(xiàn)模態(tài)框效果
這篇文章主要介紹了JS實現(xiàn)圖片點擊后出現(xiàn)模態(tài)框效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
微信小程序?qū)崿F(xiàn)語音識別轉(zhuǎn)文字功能及遇到的坑
這篇文章主要介紹了小程序?qū)崿F(xiàn)語音識別轉(zhuǎn)文字功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
在JavaScript中，等號由雙等號(==)表示，當(dāng)且僅當(dāng)兩個運算數(shù)相等時，它返回true。今天我們就來詳細(xì)探討下等號運算符的問題，并附上等號運算符和全等號運算符的區(qū)別分析。2015-04-04