課程
/前端開發(fā)
/HTML/CSS
/入門微信小程序開發(fā)
像這種的話寫什么代碼可以解決?
2018-11-02
源自:入門微信小程序開發(fā) 2-1
正在回答
多謝指點(diǎn)。好像是因為版本的原因,2.7版本的空格加單引號(hào),3.3版本的括號(hào)加雙引號(hào)
wxml代碼:
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicatorColor="{{indicatorColor}}" indicatorActiveColor="{{indicatorActiveColor}}">
? ? <block wx:for="{{imgUrls}}">
? ? ? <swiper-item>
? ? ? ? <image src="{{item}}" class="slide-image" width="355" height="150" />
? ? ? </swiper-item>
? ? </block>
? </swiper>?
樣式:
swiper {
? width: 100%;
? height: 340rpx;
}
JS
? data: {
? ? // 輪播
? ? ?imgUrls: [
? ? ? ?'/images/banner/banner1.jpg',
? ? ? ?'/images/banner/banner2.jpg',
? ? ? '/images/banner/banner3.jpg',
? ? ?],
? ? // 是否顯示面板指示點(diǎn)
? ? indicatorDots: true,
? ? // 是否自動(dòng)切換
? ? autoplay: true,
? ? // 自動(dòng)切換時(shí)間間隔
? ? interval: 5000,
? ? // 滑動(dòng)動(dòng)畫時(shí)長
? ? duration: 1000,
? ? // 是否采用銜接滑動(dòng)
? ? circular: true,
? ? // 指示點(diǎn)顏色
? ? indicatorColor: "white",
? ? // 當(dāng)前選中的指示點(diǎn)顏色
? ? ?indicatorActiveColor: "red",
? },
注意:圖片大小按iphone6的尺寸來,640x300像素即可。
舉報(bào)
帶你入門微信小程序開發(fā),了解微信小程序的基本知識(shí)。
2 回答自適應(yīng)問題
1 回答我找的圖片怎么來設(shè)置它適應(yīng)整個(gè)屏幕的寬度,
3 回答圖片排版問題
1 回答圖片顯示問題
3 回答swiper輪播圖如何實(shí)現(xiàn)與各類手機(jī)屏幕相適應(yīng)
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2022-03-27
多謝指點(diǎn)。好像是因為版本的原因,2.7版本的空格加單引號(hào),3.3版本的括號(hào)加雙引號(hào)
2018-11-05
wxml代碼:
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicatorColor="{{indicatorColor}}" indicatorActiveColor="{{indicatorActiveColor}}">
? ? <block wx:for="{{imgUrls}}">
? ? ? <swiper-item>
? ? ? ? <image src="{{item}}" class="slide-image" width="355" height="150" />
? ? ? </swiper-item>
? ? </block>
? </swiper>?
樣式:
swiper {
? width: 100%;
? height: 340rpx;
}
JS
? data: {
? ? // 輪播
? ? ?imgUrls: [
? ? ? ?'/images/banner/banner1.jpg',
? ? ? ?'/images/banner/banner2.jpg',
? ? ? '/images/banner/banner3.jpg',
? ? ?],
? ? // 是否顯示面板指示點(diǎn)
? ? indicatorDots: true,
? ? // 是否自動(dòng)切換
? ? autoplay: true,
? ? // 自動(dòng)切換時(shí)間間隔
? ? interval: 5000,
? ? // 滑動(dòng)動(dòng)畫時(shí)長
? ? duration: 1000,
? ? // 是否采用銜接滑動(dòng)
? ? circular: true,
? ? // 指示點(diǎn)顏色
? ? indicatorColor: "white",
? ? // 當(dāng)前選中的指示點(diǎn)顏色
? ? ?indicatorActiveColor: "red",
? },
注意:圖片大小按iphone6的尺寸來,640x300像素即可。