微信小程序实现类3D轮播图

DDreach 发布于2019-08-23 11:34 / 3623人阅读

摘要：在写微信小程序时，有写到实现轮播图的效果，可以直接使用微信小程序中自带的组件来实现效果图如下的相关属性是否显示小圆点，也可以自己重新设置小圆点是否衔接滑动，就是实现无限滚动与上一张图片的间距与下一张图片的间距实现自动滚动这里主要利用了

在写微信小程序时，有写到实现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

云服务器 GPU云服务器教育测评类微信小程序微信小程序技术实现工具类微信小程序怎么制作 react实现轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97147.html

微信小程序tab页、轮播图demo

摘要：效果思路利用小程序列表渲染功能，读取导航栏中栏目数据的和。将存入事件中可以读取的中。读取这个值之后，修改相应模块元素的，修改样式。效果：showImg(https://segmentfault.com/img/bVOH2s?w=369&h=82); 思路：利用小程序列表渲染功能，读取导航栏中栏目数据的index和item。将index存入事件中可以读取的data中。js读取这个dat...

bovenson 2019-08-01 16:58 评论0 收藏0
模块化高效开发微信小程序—汽车试驾

摘要：前言年月日，微信小程序发布。这也标志着的，阿里的，的小程序这三架马车在年并驱骑行。传送门试驾小程序开发工具微信开发者工具方便我们在编译时能够实时的看到界面变化，我们并不用此来进行小程序的开发，只充当一个模仪器来使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序发布。这也标志...

wuyangchun 2019-08-22 17:11 评论0 收藏0
模块化高效开发微信小程序—汽车试驾

摘要：前言年月日，微信小程序发布。这也标志着的，阿里的，的小程序这三架马车在年并驱骑行。传送门试驾小程序开发工具微信开发者工具方便我们在编译时能够实时的看到界面变化，我们并不用此来进行小程序的开发，只充当一个模仪器来使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序发布。这也标志...

lewif 2019-08-29 15:21 评论0 收藏0
模块化高效开发微信小程序—汽车试驾

摘要：前言年月日，微信小程序发布。这也标志着的，阿里的，的小程序这三架马车在年并驱骑行。传送门试驾小程序开发工具微信开发者工具方便我们在编译时能够实时的看到界面变化，我们并不用此来进行小程序的开发，只充当一个模仪器来使用。 showImg(https://segmentfault.com/img/bVbaqpO?w=558&h=1002); 前言 2017年1月9日，微信小程序发布。这也标志...

CoderBear 2019-08-02 10:24 评论0 收藏0