資訊專欄INFORMATION COLUMN
摘要：在寫(xiě)微信小程序時(shí)，有寫(xiě)到實(shí)現(xiàn)輪播圖的效果，可以直接使用微信小程序中自帶的組件來(lái)實(shí)現(xiàn)效果圖如下的相關(guān)屬性是否顯示小圓點(diǎn)，也可以自己重新設(shè)置小圓點(diǎn)是否銜接滑動(dòng)，就是實(shí)現(xiàn)無(wú)限滾動(dòng)與上一張圖片的間距與下一張圖片的間距實(shí)現(xiàn)自動(dòng)滾動(dòng)這里主要利用了
在寫(xiě)微信小程序時(shí)，有寫(xiě)到實(shí)現(xiàn)3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來(lái)實(shí)現(xiàn)
效果圖如下：
1.swiper的相關(guān)屬性indicator-dots 是否顯示小圓點(diǎn)，也可以自己重新設(shè)置小圓點(diǎn)
circular 是否銜接滑動(dòng)，就是實(shí)現(xiàn)無(wú)限滾動(dòng)
previous-margin 與上一張圖片的間距
next-margin 與下一張圖片的間距
autoplay 實(shí)現(xiàn)自動(dòng)滾動(dòng)
這里主要利用了circular實(shí)現(xiàn)無(wú)限滾動(dòng)，然后再加上前后間距，再設(shè)置圖片的層級(jí)和透明度就可以實(shí)現(xiàn)了,將圖片及容器的高度設(shè)置好就差不多可以實(shí)現(xiàn)了
wxml文件
wxss文件
/* carousel/index.wxss */
page{
background: #f7f7f7f7;
}
.imageContainer{
width: 100%;
height: 500rpx;
background: #000;
}
.item{
height: 500rpx;
}
.itemImg{
position: absolute;
width: 100%;
height: 380rpx;
border-radius: 15rpx;
z-index: 5;
opacity: 0.7;
top: 13%;
}
.active{
opacity: 1;
z-index: 10;
height: 430rpx;
top: 7%;
transition:all .2s ease-in 0s;
}
JS文件
// carousel/index.js
Page({
data: {
currentIndex: 0
},
onLoad: function (options) {
},
/* 這里實(shí)現(xiàn)控制中間凸顯圖片的樣式 */
handleChange: function(e) {
this.setData({
currentIndex: e.detail.current
})
},
})
正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）
往期好文推薦：
畫(huà)三角形
webpack打包（有面試題）
setInterval與setTimeout
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97147.html
摘要：效果思路利用小程序列表渲染功能，讀取導(dǎo)航欄中欄目數(shù)據(jù)的和。將存入事件中可以讀取的中。讀取這個(gè)值之后，修改相應(yīng)模塊元素的，修改樣式。 效果：showImg(https://segmentfault.com/img/bVOH2s?w=369&h=82); 思路：利用小程序列表渲染功能，讀取導(dǎo)航欄中欄目數(shù)據(jù)的index和item。將index存入事件中可以讀取的data中。js讀取這個(gè)dat...
摘要：前言年月日，微信小程序發(fā)布。這也標(biāo)志著的，阿里的，的小程序這三架馬車在年并驅(qū)騎行。傳送門試駕小程序開(kāi)發(fā)工具微信開(kāi)發(fā)者工具方便我們?cè)诰幾g時(shí)能夠?qū)崟r(shí)的看到界面變化，我們并不用此來(lái)進(jìn)行小程序的開(kāi)發(fā)，只充當(dāng)一個(gè)模儀器來(lái)使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序發(fā)布。這也標(biāo)志...
摘要：前言年月日，微信小程序發(fā)布。這也標(biāo)志著的，阿里的，的小程序這三架馬車在年并驅(qū)騎行。傳送門試駕小程序開(kāi)發(fā)工具微信開(kāi)發(fā)者工具方便我們?cè)诰幾g時(shí)能夠?qū)崟r(shí)的看到界面變化，我們并不用此來(lái)進(jìn)行小程序的開(kāi)發(fā)，只充當(dāng)一個(gè)模儀器來(lái)使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序發(fā)布。這也標(biāo)志...
摘要：前言年月日，微信小程序發(fā)布。這也標(biāo)志著的，阿里的，的小程序這三架馬車在年并驅(qū)騎行。傳送門試駕小程序開(kāi)發(fā)工具微信開(kāi)發(fā)者工具方便我們?cè)诰幾g時(shí)能夠?qū)崟r(shí)的看到界面變化，我們并不用此來(lái)進(jìn)行小程序的開(kāi)發(fā)，只充當(dāng)一個(gè)模儀器來(lái)使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序發(fā)布。這也標(biāo)志...
閱讀 2528·2021-11-24 10:29
閱讀 2668·2021-09-24 09:48
閱讀 5775·2021-09-22 15:56
閱讀 3182·2021-09-06 15:00
閱讀 2702·2019-08-30 15:54
閱讀 768·2019-08-30 13:48
閱讀 2961·2019-08-30 11:17
閱讀 3452·2019-08-29 11:20
