国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序實現類3D輪播圖

DDreach / 3728人閱讀

摘要:在寫微信小程序時,有寫到實現輪播圖的效果,可以直接使用微信小程序中自帶的組件來實現效果圖如下的相關屬性是否顯示小圓點,也可以自己重新設置小圓點是否銜接滑動,就是實現無限滾動與上一張圖片的間距與下一張圖片的間距實現自動滾動這里主要利用了

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

效果圖如下:

1.swiper的相關屬性

indicator-dots 是否顯示小圓點,也可以自己重新設置小圓點

circular 是否銜接滑動,就是實現無限滾動

previous-margin 與上一張圖片的間距

next-margin 與下一張圖片的間距

autoplay 實現自動滾動

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

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) {
  
  },
  /* 這里實現控制中間凸顯圖片的樣式 */
  handleChange: function(e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})
正在努力學習中,若對你的學習有幫助,留下你的印記唄(點個贊咯^_^)

往期好文推薦:

畫三角形

webpack打包(有面試題)

setInterval與setTimeout

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97147.html

相關文章

  • 信小程序tab頁、播圖demo

    摘要:效果思路利用小程序列表渲染功能,讀取導航欄中欄目數據的和。將存入事件中可以讀取的中。讀取這個值之后,修改相應模塊元素的,修改樣式。 效果:showImg(https://segmentfault.com/img/bVOH2s?w=369&h=82); 思路:利用小程序列表渲染功能,讀取導航欄中欄目數據的index和item。將index存入事件中可以讀取的data中。js讀取這個dat...

    bovenson 評論0 收藏0
  • 模塊化高效開發信小程序—汽車試駕

    摘要:前言年月日,微信小程序發布。這也標志著的,阿里的,的小程序這三架馬車在年并驅騎行。傳送門試駕小程序開發工具微信開發者工具方便我們在編譯時能夠實時的看到界面變化,我們并不用此來進行小程序的開發,只充當一個模儀器來使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日,微信小程序發布。這也標志...

    wuyangchun 評論0 收藏0
  • 模塊化高效開發信小程序—汽車試駕

    摘要:前言年月日,微信小程序發布。這也標志著的,阿里的,的小程序這三架馬車在年并驅騎行。傳送門試駕小程序開發工具微信開發者工具方便我們在編譯時能夠實時的看到界面變化,我們并不用此來進行小程序的開發,只充當一個模儀器來使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日,微信小程序發布。這也標志...

    lewif 評論0 收藏0
  • 模塊化高效開發信小程序—汽車試駕

    摘要:前言年月日,微信小程序發布。這也標志著的,阿里的,的小程序這三架馬車在年并驅騎行。傳送門試駕小程序開發工具微信開發者工具方便我們在編譯時能夠實時的看到界面變化,我們并不用此來進行小程序的開發,只充當一個模儀器來使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日,微信小程序發布。這也標志...

    CoderBear 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<