最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

微信小程序使用swiper組件實現(xiàn)類3D輪播圖

 更新時間：2018年08月29日 08:37:25   作者：ZJW0215  
在寫微信小程序時，有寫到實現(xiàn)3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來實現(xiàn)。下面通過實例代碼給大家介紹微信小程序輪播圖的實現(xiàn)方法，感興趣的朋友一起看看吧

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。

Swiper能實現(xiàn)觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

Swiper開源、免費、穩(wěn)定、使用簡單、功能強大，是架構移動終端網(wǎng)站的重要選擇！

在寫微信小程序時，有寫到實現(xiàn)3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來實現(xiàn)

效果圖如下：

1.swiper的相關屬性

  • indicator-dots 是否顯示小圓點，也可以自己重新設置小圓點
  • circular 是否銜接滑動，就是實現(xiàn)無限滾動
  • previous-margin 與上一張圖片的間距
  • next-margin 與下一張圖片的間距
  • autoplay 實現(xiàn)自動滾動

這里主要利用了circular實現(xiàn)無限滾動，然后再加上前后間距，再設置圖片的層級和透明度就可以實現(xiàn)了,將圖片及容器的高度設置好就差不多可以實現(xiàn)了

wxml文件

<!--carousel/index.wxml-->
<swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>
 <block wx:for="{{3}}" wx:key="{{index}}">
 <swiper-item class="item">
 <image class="itemImg {{currentIndex == index ? 'active': ''}}" src="../../../image/3.jpg"></image>
 </swiper-item>
 </block>
</swiper>

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) {
 
 },
 /* 這里實現(xiàn)控制中間凸顯圖片的樣式 */
 handleChange: function(e) {
 this.setData({
 currentIndex: e.detail.current
 })
 },
})

總結

以上所述是小編給大家介紹的微信小程序使用swiper組件實現(xiàn)類3D輪播圖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關文章

最新評論

龙江县| 乳源| 莱芜市| 南木林县| 元朗区| 天峻县| 宣威市| 会泽县| 酒泉市| 海宁市| 黔江区| 大竹县| 大同市| 竹北市| 黄龙县| 噶尔县| 大兴区| 柳江县| 东乡县| 齐齐哈尔市| 纳雍县| 霞浦县| 苍南县| 云安县| 华宁县| 丹凤县| 陕西省| 茂名市| 高要市| 宝兴县| 博野县| 南丰县| 长泰县| 黄冈市| 陇西县| 湄潭县| 略阳县| 桂阳县| 绍兴市| 山丹县| 都兰县|