修改官方swiper樣式
成都創(chuàng)新互聯(lián)公司專注于陽東網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供陽東營銷型網(wǎng)站建設(shè),陽東網(wǎng)站制作、陽東網(wǎng)頁設(shè)計(jì)、陽東網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù),打造陽東網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供陽東網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
從微信官方微信開發(fā)文檔中心復(fù)制swiper 代碼塊。
wxml定義
<view class="wrap"> <swiper class="swipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="100%" height="150" ></image> </swiper-item> </block> </swiper> <!--重置小圓點(diǎn)的樣式 --> <view class="dots"> <block wx:for="{{imgUrls}}"> <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view> </block> </view> </view>
wxss定義樣式
.wrap { height: auto; position: relative; width: 100%; } .swipers { height: 350rpx; width: 100%; } .slide-image { display: block; width: 100%; height: 100%; } /*用來包裹所有的小圓點(diǎn) */ .dots { width: 156rpx; height: 36rpx; display: flex; flex-direction: row; position: absolute; left: 320rpx; bottom: 20rpx; } /*未選中時(shí)的小圓點(diǎn)樣式 */ .dot { width: 26rpx; height: 26rpx; border-radius: 50%; margin-right: 26rpx; background-color: white; } /*選中以后的小圓點(diǎn)樣式 */ .active { width: 26rpx; height: 26rpx; background-color: coral; }
賦值
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' ], currentSwiper: 0, autoplay: true }, swiperChange: function (e) { this.setData({ currentSwiper: e.detail.current }) } })
效果圖:
總結(jié)
以上所述是小編給大家介紹的微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
新聞標(biāo)題:微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼
標(biāo)題鏈接:http://muchs.cn/article18/ijsddp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、微信公眾號、做網(wǎng)站、網(wǎng)站策劃、網(wǎng)站營銷、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)